You are here

Home » API reference » Popup Maker - All popup types 8

admin.css in Popup Maker - All popup types 8

Same filename and directory in other branches
  1. 7 css/admin.css
@font-face {
  font-family: 'Roboto';
  src: url(../lib/fonts/roboto/Roboto-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url(../lib/fonts/roboto/Roboto-Italic.ttf);
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Roboto';
  src: url(../lib/fonts/roboto/Roboto-Medium.ttf);
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url(../lib/fonts/roboto/Roboto-Bold.ttf);
  font-weight: 700;
}

.sgpm-red {
  color: #e2574c !important;
}

.sgpm-green {
  color: #4caf50 !important;
}

.sgpm-black {
  color: #000 !important;;
}

.sgpm-hide {
  display: none !important;
}

.sgpm-btn {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  margin: 0;
  padding: 8px 14px 9px;
  background: #2ea664;
  color: #fff;
  line-height: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  border: none;
  border-radius: .25rem;
  box-shadow: none;
  text-align: center;
  white-space: nowrap;
  font-size: 15px;
  box-sizing: border-box;
  outline: none;
}

.sgpm-btn:hover,
.sgpm-btn:focus {
  text-decoration: none;
  border: none;
  color: #fff;
}

.sgpm-btn svg {
  vertical-align: middle;
}

.sgpm-btn--red {
  background-color: #e2574c;
}

.sgpm-btn--green {
  background-color: #4caf50;
}

.sgpm-btn--green-meadow {
  background-color: #1bbc9b;
}

.sgpm-fab-btn {
  position: relative;
  display: inline-flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  line-height: 1;
  width: 40px;
  height: 40px;
  text-decoration: none;
  background-color: #018786;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 0;
  outline: none;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  overflow: hidden;
}

.sgpm-fab-btn svg {
  pointer-events: none;
  fill: #fff;
}

.sgpm-fab-btn:active {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.sgpm-fab-btn:hover,
.sgpm-fab-btn:focus {
  text-decoration: none;
  border: none;
}

.sgpm-fab-btn:before {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
  top: calc(50% - 100%);
  left: calc(50% - 100%);
  width: 200%;
  height: 200%;
  transition: opacity 15ms linear;
  z-index: 1;
  background-color: #fff;
}

#sgpm-admin {
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.sgpm-tabs-toolbar {
  position: relative;
  display: flex;
}

.sgpm-tab {
  padding: 12px 22px 11px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-radius: .25rem .25rem 0 0;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  color: #0576b9;
  font-size: 1em;
}

.sgpm-tab.active {
  border-color: #e8e8e8;
  background: #fff;
  border-bottom-color: #fff;
  color: #2c2d30;
  cursor: default;
}

.sgpm-tabs-content {
  margin: 0;
  width: 100%;
  background: #fff;
  border-radius: 0 0 .25rem .25rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
}

.sgpm-panel {
  padding: 2rem 2rem 1rem;
}

.sgpm-panel:not(.active) {
  display: none;
}

.sgpm-panel p {
  margin: 1em 0;
}

.sgpm-panel-title {
  margin: 0 0 30px !important;
}

.sgpm-notice {
  margin: 0 0 1.33em;
  font-weight: 500;
  font-size: 1.2em;
}

.sgpm-input-text label {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
}

.sgpm-input-text input {
  padding: 6px 8px;
  min-width: 350px;
}

.sgpm-field-description {
  margin: 0 !important;
  vertical-align: middle;
  font-size: 0.9em;
  font-style: italic;
  color: #666;
  line-height: 1.5;
}

.sgpm-info-about-account-activate {
  text-align: center;
  margin-top: 35px !important;
  color: #e2574c !important;
  font-size: 1.3em;
}

.sgpm-info-about-activation-url {
  text-align: center;
}

.sgpm-info-about-not-popups {
  margin-top: 35px !important;
  color: #e2574c !important;
  font-size: 1.3em;
}

.sgpm-popup-list table {
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
}

.sgpm-popup-list table tr {
  position: relative;
  height: 76px;
  background-color: #fff;
  border: none;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

.sgpm-popup-list table td {
  border: none;
}

.sgpm-popup-list form {
  display: inline-block;
}

.sgpm-popup-title {
  display: block;
  margin-bottom: 20px;
  font-size: 24px;
}

.sgpm-popup-list-actions {
  margin-bottom: 15px;
}

.sgpm-popup-status {
  font-size: 22px;
  font-weight: 500;
}

.sgpm-popup-list-actions .sgpm-fab-btn {
  margin-right: 16px;
}

.sgpm-refresh-wrap-bottom {
  margin-top: 30px;
}

.sgpm-refresh-wrap-top {
  margin-bottom: 30px;
}

.sgpm-popup-rule {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 16px;
}

.sgpm-popup-rule .sgpm-fab-btn {
  margin-top: 16px;
  margin-left: 16px;
}

.sgpm-select {
  height: 40px;
  line-height: 40px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #a0a0a2;
  border-radius: .25rem;
  outline: 0;
  color: #2c2d30;
  margin: 0 10px 0 0;
  box-shadow: none;
  background: #fff;
  font-size: 1.2em;
  padding-left: 10px;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
}

.sgpm-label {
  display: block;
  color: #2c2d30;
  font-weight: 700;
  font-size: 1em;
}

.sgpm-popup-rule-value {
  width: 100%;
}

.sgpm-popup-rule .select2-selection {
  min-height: 40px !important;
}

.sgpm-rule-value {
  width: 200px;
}

#sgpm-support-panel {
  text-align: center;
}

.sgpm-support-block-box {
  border: 3px solid #e2574c;
  padding-top: 30px;
  width: 401px;
  text-align: center;
  display: inline-block;
  margin: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #e2574c !important;
  text-decoration: none;
  outline: 0 !important;
}

.sgpm-support-block-box svg {
  fill: #e2574c;
}

.sgpm-support-block-box:hover {
  background-color: #e2574c !important;
  color: #ffffff !important;
}

.sgpm-support-block-box:hover svg {
  fill: #ffffff;
}


.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container .select2-selection--single .select2-selection__clear {
  position: relative;
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}

.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  min-height: 32px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline-block;
  overflow: hidden;
  padding-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container .select2-search--inline {
  float: left;
}

.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 5px;
  padding: 0;
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-results__option[aria-selected] {
  cursor: pointer;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
}

.select2-search--dropdown .select2-search__field {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.select2-search--dropdown.select2-search--hide {
  display: none;
}

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  display: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0 5px;
  width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  list-style: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #999;
  margin-top: 5px;
  float: left;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  margin-top: 5px;
  margin-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #333;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
  float: right;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--default .select2-results__option[role=group] {
  padding: 0;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd;
}

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  padding-left: 0;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -1em;
  padding-left: 2em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -2em;
  padding-left: 3em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -3em;
  padding-left: 4em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -4em;
  padding-left: 5em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -5em;
  padding-left: 6em;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
  color: white;
}

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
  background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
  background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic .select2-selection--single:focus {
  border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  margin-right: 10px;
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
  color: #999;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
  background-color: #ddd;
  border: none;
  border-left: 1px solid #aaa;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
  background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
  background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
  background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
  background: transparent;
  border: none;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
  background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
  background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
  background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
  background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
}

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0;
}

.select2-container--classic .select2-selection--multiple:focus {
  border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
  list-style: none;
  margin: 0;
  padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
  display: none;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
  color: #888;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #555;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  float: right;
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0;
}

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none;
}

.select2-container--classic .select2-dropdown {
  background-color: #fff;
  border: 1px solid transparent;
}

.select2-container--classic .select2-dropdown--above {
  border-bottom: none;
}

.select2-container--classic .select2-dropdown--below {
  border-top: none;
}

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--classic .select2-results__option[role=group] {
  padding: 0;
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
  color: grey;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: #3875d7;
  color: #fff;
}

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb;
}

File

css/admin.css
View source 
  1. @font-face {

  2.   font-family: 'Roboto';

  3.   src: url(../lib/fonts/roboto/Roboto-Regular.ttf);

  4.   font-weight: 400;

  5. }

  6. 

  7. @font-face {

  8.   font-family: 'Roboto';

  9.   src: url(../lib/fonts/roboto/Roboto-Italic.ttf);

  10.   font-weight: 400;

  11.   font-style: italic;

  12. }

  13. 

  14. @font-face {

  15.   font-family: 'Roboto';

  16.   src: url(../lib/fonts/roboto/Roboto-Medium.ttf);

  17.   font-weight: 500;

  18. }

  19. 

  20. @font-face {

  21.   font-family: 'Roboto';

  22.   src: url(../lib/fonts/roboto/Roboto-Bold.ttf);

  23.   font-weight: 700;

  24. }

  25. 

  26. .sgpm-red {

  27.   color: #e2574c !important;

  28. }

  29. 

  30. .sgpm-green {

  31.   color: #4caf50 !important;

  32. }

  33. 

  34. .sgpm-black {

  35.   color: #000 !important;;

  36. }

  37. 

  38. .sgpm-hide {

  39.   display: none !important;

  40. }

  41. 

  42. .sgpm-btn {

  43.   position: relative;

  44.   display: inline-block;

  45.   vertical-align: bottom;

  46.   margin: 0;

  47.   padding: 8px 14px 9px;

  48.   background: #2ea664;

  49.   color: #fff;

  50.   line-height: 1.2rem;

  51.   font-weight: 700;

  52.   text-decoration: none;

  53.   cursor: pointer;

  54.   text-shadow: 0 1px 1px rgba(0, 0, 0, .1);

  55.   border: none;

  56.   border-radius: .25rem;

  57.   box-shadow: none;

  58.   text-align: center;

  59.   white-space: nowrap;

  60.   font-size: 15px;

  61.   box-sizing: border-box;

  62.   outline: none;

  63. }

  64. 

  65. .sgpm-btn:hover,

  66. .sgpm-btn:focus {

  67.   text-decoration: none;

  68.   border: none;

  69.   color: #fff;

  70. }

  71. 

  72. .sgpm-btn svg {

  73.   vertical-align: middle;

  74. }

  75. 

  76. .sgpm-btn--red {

  77.   background-color: #e2574c;

  78. }

  79. 

  80. .sgpm-btn--green {

  81.   background-color: #4caf50;

  82. }

  83. 

  84. .sgpm-btn--green-meadow {

  85.   background-color: #1bbc9b;

  86. }

  87. 

  88. .sgpm-fab-btn {

  89.   position: relative;

  90.   display: inline-flex;

  91.   margin: 0;

  92.   justify-content: center;

  93.   align-items: center;

  94.   font-size: 24px;

  95.   line-height: 1;

  96.   width: 40px;

  97.   height: 40px;

  98.   text-decoration: none;

  99.   background-color: #018786;

  100.   color: white;

  101.   border: none;

  102.   border-radius: 50%;

  103.   padding: 0;

  104.   outline: none;

  105.   box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);

  106.   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);

  107.   overflow: hidden;

  108. }

  109. 

  110. .sgpm-fab-btn svg {

  111.   pointer-events: none;

  112.   fill: #fff;

  113. }

  114. 

  115. .sgpm-fab-btn:active {

  116.   box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);

  117. }

  118. 

  119. .sgpm-fab-btn:hover,

  120. .sgpm-fab-btn:focus {

  121.   text-decoration: none;

  122.   border: none;

  123. }

  124. 

  125. .sgpm-fab-btn:before {

  126.   position: absolute;

  127.   border-radius: 50%;

  128.   opacity: 0;

  129.   pointer-events: none;

  130.   content: "";

  131.   top: calc(50% - 100%);

  132.   left: calc(50% - 100%);

  133.   width: 200%;

  134.   height: 200%;

  135.   transition: opacity 15ms linear;

  136.   z-index: 1;

  137.   background-color: #fff;

  138. }

  139. 

  140. #sgpm-admin {

  141.   position: relative;

  142.   font-family: 'Roboto', sans-serif;

  143.   font-size: 16px;

  144. }

  145. 

  146. .sgpm-tabs-toolbar {

  147.   position: relative;

  148.   display: flex;

  149. }

  150. 

  151. .sgpm-tab {

  152.   padding: 12px 22px 11px;

  153.   margin-bottom: -1px;

  154.   border: 1px solid transparent;

  155.   border-radius: .25rem .25rem 0 0;

  156.   font-weight: 700;

  157.   text-overflow: ellipsis;

  158.   overflow: hidden;

  159.   white-space: nowrap;

  160.   box-sizing: border-box;

  161.   cursor: pointer;

  162.   color: #0576b9;

  163.   font-size: 1em;

  164. }

  165. 

  166. .sgpm-tab.active {

  167.   border-color: #e8e8e8;

  168.   background: #fff;

  169.   border-bottom-color: #fff;

  170.   color: #2c2d30;

  171.   cursor: default;

  172. }

  173. 

  174. .sgpm-tabs-content {

  175.   margin: 0;

  176.   width: 100%;

  177.   background: #fff;

  178.   border-radius: 0 0 .25rem .25rem;

  179.   box-shadow: 0 1px 0 rgba(0, 0, 0, .25);

  180.   border: 1px solid #e8e8e8;

  181.   box-sizing: border-box;

  182. }

  183. 

  184. .sgpm-panel {

  185.   padding: 2rem 2rem 1rem;

  186. }

  187. 

  188. .sgpm-panel:not(.active) {

  189.   display: none;

  190. }

  191. 

  192. .sgpm-panel p {

  193.   margin: 1em 0;

  194. }

  195. 

  196. .sgpm-panel-title {

  197.   margin: 0 0 30px !important;

  198. }

  199. 

  200. .sgpm-notice {

  201.   margin: 0 0 1.33em;

  202.   font-weight: 500;

  203.   font-size: 1.2em;

  204. }

  205. 

  206. .sgpm-input-text label {

  207.   display: inline-block;

  208.   margin-bottom: 2px;

  209.   font-size: 14px;

  210.   font-weight: 600;

  211. }

  212. 

  213. .sgpm-input-text input {

  214.   padding: 6px 8px;

  215.   min-width: 350px;

  216. }

  217. 

  218. .sgpm-field-description {

  219.   margin: 0 !important;

  220.   vertical-align: middle;

  221.   font-size: 0.9em;

  222.   font-style: italic;

  223.   color: #666;

  224.   line-height: 1.5;

  225. }

  226. 

  227. .sgpm-info-about-account-activate {

  228.   text-align: center;

  229.   margin-top: 35px !important;

  230.   color: #e2574c !important;

  231.   font-size: 1.3em;

  232. }

  233. 

  234. .sgpm-info-about-activation-url {

  235.   text-align: center;

  236. }

  237. 

  238. .sgpm-info-about-not-popups {

  239.   margin-top: 35px !important;

  240.   color: #e2574c !important;

  241.   font-size: 1.3em;

  242. }

  243. 

  244. .sgpm-popup-list table {

  245.   font-size: 1.2em;

  246.   font-family: 'Roboto', sans-serif;

  247. }

  248. 

  249. .sgpm-popup-list table tr {

  250.   position: relative;

  251.   height: 76px;

  252.   background-color: #fff;

  253.   border: none;

  254.   overflow: hidden;

  255.   border-bottom: 1px solid #ddd;

  256. }

  257. 

  258. .sgpm-popup-list table td {

  259.   border: none;

  260. }

  261. 

  262. .sgpm-popup-list form {

  263.   display: inline-block;

  264. }

  265. 

  266. .sgpm-popup-title {

  267.   display: block;

  268.   margin-bottom: 20px;

  269.   font-size: 24px;

  270. }

  271. 

  272. .sgpm-popup-list-actions {

  273.   margin-bottom: 15px;

  274. }

  275. 

  276. .sgpm-popup-status {

  277.   font-size: 22px;

  278.   font-weight: 500;

  279. }

  280. 

  281. .sgpm-popup-list-actions .sgpm-fab-btn {

  282.   margin-right: 16px;

  283. }

  284. 

  285. .sgpm-refresh-wrap-bottom {

  286.   margin-top: 30px;

  287. }

  288. 

  289. .sgpm-refresh-wrap-top {

  290.   margin-bottom: 30px;

  291. }

  292. 

  293. .sgpm-popup-rule {

  294.   display: flex;

  295.   justify-content: flex-start;

  296.   align-items: flex-start;

  297.   margin-bottom: 16px;

  298. }

  299. 

  300. .sgpm-popup-rule .sgpm-fab-btn {

  301.   margin-top: 16px;

  302.   margin-left: 16px;

  303. }

  304. 

  305. .sgpm-select {

  306.   height: 40px;

  307.   line-height: 40px;

  308.   font-family: 'Roboto', sans-serif;

  309.   border: 1px solid #a0a0a2;

  310.   border-radius: .25rem;

  311.   outline: 0;

  312.   color: #2c2d30;

  313.   margin: 0 10px 0 0;

  314.   box-shadow: none;

  315.   background: #fff;

  316.   font-size: 1.2em;

  317.   padding-left: 10px;

  318.   background-repeat: no-repeat;

  319.   background-position-x: right;

  320.   background-position-y: center;

  321. }

  322. 

  323. .sgpm-label {

  324.   display: block;

  325.   color: #2c2d30;

  326.   font-weight: 700;

  327.   font-size: 1em;

  328. }

  329. 

  330. .sgpm-popup-rule-value {

  331.   width: 100%;

  332. }

  333. 

  334. .sgpm-popup-rule .select2-selection {

  335.   min-height: 40px !important;

  336. }

  337. 

  338. .sgpm-rule-value {

  339.   width: 200px;

  340. }

  341. 

  342. #sgpm-support-panel {

  343.   text-align: center;

  344. }

  345. 

  346. .sgpm-support-block-box {

  347.   border: 3px solid #e2574c;

  348.   padding-top: 30px;

  349.   width: 401px;

  350.   text-align: center;

  351.   display: inline-block;

  352.   margin: 30px;

  353.   font-size: 20px;

  354.   font-weight: bold;

  355.   color: #e2574c !important;

  356.   text-decoration: none;

  357.   outline: 0 !important;

  358. }

  359. 

  360. .sgpm-support-block-box svg {

  361.   fill: #e2574c;

  362. }

  363. 

  364. .sgpm-support-block-box:hover {

  365.   background-color: #e2574c !important;

  366.   color: #ffffff !important;

  367. }

  368. 

  369. .sgpm-support-block-box:hover svg {

  370.   fill: #ffffff;

  371. }

  372. 

  373. 

  374. .select2-container {

  375.   box-sizing: border-box;

  376.   display: inline-block;

  377.   margin: 0;

  378.   position: relative;

  379.   vertical-align: middle;

  380. }

  381. 

  382. .select2-container .select2-selection--single {

  383.   box-sizing: border-box;

  384.   cursor: pointer;

  385.   display: block;

  386.   height: 28px;

  387.   user-select: none;

  388.   -webkit-user-select: none;

  389. }

  390. 

  391. .select2-container .select2-selection--single .select2-selection__rendered {

  392.   display: block;

  393.   padding-left: 8px;

  394.   padding-right: 20px;

  395.   overflow: hidden;

  396.   text-overflow: ellipsis;

  397.   white-space: nowrap;

  398. }

  399. 

  400. .select2-container .select2-selection--single .select2-selection__clear {

  401.   position: relative;

  402. }

  403. 

  404. .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {

  405.   padding-right: 8px;

  406.   padding-left: 20px;

  407. }

  408. 

  409. .select2-container .select2-selection--multiple {

  410.   box-sizing: border-box;

  411.   cursor: pointer;

  412.   display: block;

  413.   min-height: 32px;

  414.   user-select: none;

  415.   -webkit-user-select: none;

  416. }

  417. 

  418. .select2-container .select2-selection--multiple .select2-selection__rendered {

  419.   display: inline-block;

  420.   overflow: hidden;

  421.   padding-left: 8px;

  422.   text-overflow: ellipsis;

  423.   white-space: nowrap;

  424. }

  425. 

  426. .select2-container .select2-search--inline {

  427.   float: left;

  428. }

  429. 

  430. .select2-container .select2-search--inline .select2-search__field {

  431.   box-sizing: border-box;

  432.   border: none;

  433.   font-size: 100%;

  434.   margin-top: 5px;

  435.   padding: 0;

  436. }

  437. 

  438. .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {

  439.   -webkit-appearance: none;

  440. }

  441. 

  442. .select2-dropdown {

  443.   background-color: white;

  444.   border: 1px solid #aaa;

  445.   border-radius: 4px;

  446.   box-sizing: border-box;

  447.   display: block;

  448.   position: absolute;

  449.   left: -100000px;

  450.   width: 100%;

  451.   z-index: 1051;

  452. }

  453. 

  454. .select2-results {

  455.   display: block;

  456. }

  457. 

  458. .select2-results__options {

  459.   list-style: none;

  460.   margin: 0;

  461.   padding: 0;

  462. }

  463. 

  464. .select2-results__option {

  465.   padding: 6px;

  466.   user-select: none;

  467.   -webkit-user-select: none;

  468. }

  469. 

  470. .select2-results__option[aria-selected] {

  471.   cursor: pointer;

  472. }

  473. 

  474. .select2-container--open .select2-dropdown {

  475.   left: 0;

  476. }

  477. 

  478. .select2-container--open .select2-dropdown--above {

  479.   border-bottom: none;

  480.   border-bottom-left-radius: 0;

  481.   border-bottom-right-radius: 0;

  482. }

  483. 

  484. .select2-container--open .select2-dropdown--below {

  485.   border-top: none;

  486.   border-top-left-radius: 0;

  487.   border-top-right-radius: 0;

  488. }

  489. 

  490. .select2-search--dropdown {

  491.   display: block;

  492.   padding: 4px;

  493. }

  494. 

  495. .select2-search--dropdown .select2-search__field {

  496.   padding: 4px;

  497.   width: 100%;

  498.   box-sizing: border-box;

  499. }

  500. 

  501. .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {

  502.   -webkit-appearance: none;

  503. }

  504. 

  505. .select2-search--dropdown.select2-search--hide {

  506.   display: none;

  507. }

  508. 

  509. .select2-close-mask {

  510.   border: 0;

  511.   margin: 0;

  512.   padding: 0;

  513.   display: block;

  514.   position: fixed;

  515.   left: 0;

  516.   top: 0;

  517.   min-height: 100%;

  518.   min-width: 100%;

  519.   height: auto;

  520.   width: auto;

  521.   opacity: 0;

  522.   z-index: 99;

  523.   background-color: #fff;

  524.   filter: alpha(opacity=0);

  525. }

  526. 

  527. .select2-hidden-accessible {

  528.   border: 0 !important;

  529.   clip: rect(0 0 0 0) !important;

  530.   -webkit-clip-path: inset(50%) !important;

  531.   clip-path: inset(50%) !important;

  532.   height: 1px !important;

  533.   overflow: hidden !important;

  534.   padding: 0 !important;

  535.   position: absolute !important;

  536.   width: 1px !important;

  537.   white-space: nowrap !important;

  538. }

  539. 

  540. .select2-container--default .select2-selection--single {

  541.   background-color: #fff;

  542.   border: 1px solid #aaa;

  543.   border-radius: 4px;

  544. }

  545. 

  546. .select2-container--default .select2-selection--single .select2-selection__rendered {

  547.   color: #444;

  548.   line-height: 28px;

  549. }

  550. 

  551. .select2-container--default .select2-selection--single .select2-selection__clear {

  552.   cursor: pointer;

  553.   float: right;

  554.   font-weight: bold;

  555. }

  556. 

  557. .select2-container--default .select2-selection--single .select2-selection__placeholder {

  558.   color: #999;

  559. }

  560. 

  561. .select2-container--default .select2-selection--single .select2-selection__arrow {

  562.   height: 26px;

  563.   position: absolute;

  564.   top: 1px;

  565.   right: 1px;

  566.   width: 20px;

  567. }

  568. 

  569. .select2-container--default .select2-selection--single .select2-selection__arrow b {

  570.   border-color: #888 transparent transparent transparent;

  571.   border-style: solid;

  572.   border-width: 5px 4px 0 4px;

  573.   height: 0;

  574.   left: 50%;

  575.   margin-left: -4px;

  576.   margin-top: -2px;

  577.   position: absolute;

  578.   top: 50%;

  579.   width: 0;

  580. }

  581. 

  582. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {

  583.   float: left;

  584. }

  585. 

  586. .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {

  587.   left: 1px;

  588.   right: auto;

  589. }

  590. 

  591. .select2-container--default.select2-container--disabled .select2-selection--single {

  592.   background-color: #eee;

  593.   cursor: default;

  594. }

  595. 

  596. .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {

  597.   display: none;

  598. }

  599. 

  600. .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {

  601.   border-color: transparent transparent #888 transparent;

  602.   border-width: 0 4px 5px 4px;

  603. }

  604. 

  605. .select2-container--default .select2-selection--multiple {

  606.   background-color: white;

  607.   border: 1px solid #aaa;

  608.   border-radius: 4px;

  609.   cursor: text;

  610. }

  611. 

  612. .select2-container--default .select2-selection--multiple .select2-selection__rendered {

  613.   box-sizing: border-box;

  614.   list-style: none;

  615.   margin: 0;

  616.   padding: 0 5px;

  617.   width: 100%;

  618. }

  619. 

  620. .select2-container--default .select2-selection--multiple .select2-selection__rendered li {

  621.   list-style: none;

  622. }

  623. 

  624. .select2-container--default .select2-selection--multiple .select2-selection__placeholder {

  625.   color: #999;

  626.   margin-top: 5px;

  627.   float: left;

  628. }

  629. 

  630. .select2-container--default .select2-selection--multiple .select2-selection__clear {

  631.   cursor: pointer;

  632.   float: right;

  633.   font-weight: bold;

  634.   margin-top: 5px;

  635.   margin-right: 10px;

  636. }

  637. 

  638. .select2-container--default .select2-selection--multiple .select2-selection__choice {

  639.   background-color: #e4e4e4;

  640.   border: 1px solid #aaa;

  641.   border-radius: 4px;

  642.   cursor: default;

  643.   float: left;

  644.   margin-right: 5px;

  645.   margin-top: 5px;

  646.   padding: 0 5px;

  647. }

  648. 

  649. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {

  650.   color: #999;

  651.   cursor: pointer;

  652.   display: inline-block;

  653.   font-weight: bold;

  654.   margin-right: 2px;

  655. }

  656. 

  657. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {

  658.   color: #333;

  659. }

  660. 

  661. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,

  662. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,

  663. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {

  664.   float: right;

  665. }

  666. 

  667. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {

  668.   margin-left: 5px;

  669.   margin-right: auto;

  670. }

  671. 

  672. .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {

  673.   margin-left: 2px;

  674.   margin-right: auto;

  675. }

  676. 

  677. .select2-container--default.select2-container--focus .select2-selection--multiple {

  678.   border: solid black 1px;

  679.   outline: 0;

  680. }

  681. 

  682. .select2-container--default.select2-container--disabled .select2-selection--multiple {

  683.   background-color: #eee;

  684.   cursor: default;

  685. }

  686. 

  687. .select2-container--default.select2-container--disabled .select2-selection__choice__remove {

  688.   display: none;

  689. }

  690. 

  691. .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,

  692. .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {

  693.   border-top-left-radius: 0;

  694.   border-top-right-radius: 0;

  695. }

  696. 

  697. .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,

  698. .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {

  699.   border-bottom-left-radius: 0;

  700.   border-bottom-right-radius: 0;

  701. }

  702. 

  703. .select2-container--default .select2-search--dropdown .select2-search__field {

  704.   border: 1px solid #aaa;

  705. }

  706. 

  707. .select2-container--default .select2-search--inline .select2-search__field {

  708.   background: transparent;

  709.   border: none;

  710.   outline: 0;

  711.   box-shadow: none;

  712.   -webkit-appearance: textfield;

  713. }

  714. 

  715. .select2-container--default .select2-results > .select2-results__options {

  716.   max-height: 200px;

  717.   overflow-y: auto;

  718. }

  719. 

  720. .select2-container--default .select2-results__option[role=group] {

  721.   padding: 0;

  722. }

  723. 

  724. .select2-container--default .select2-results__option[aria-disabled=true] {

  725.   color: #999;

  726. }

  727. 

  728. .select2-container--default .select2-results__option[aria-selected=true] {

  729.   background-color: #ddd;

  730. }

  731. 

  732. .select2-container--default .select2-results__option .select2-results__option {

  733.   padding-left: 1em;

  734. }

  735. 

  736. .select2-container--default .select2-results__option .select2-results__option .select2-results__group {

  737.   padding-left: 0;

  738. }

  739. 

  740. .select2-container--default .select2-results__option .select2-results__option .select2-results__option {

  741.   margin-left: -1em;

  742.   padding-left: 2em;

  743. }

  744. 

  745. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  746.   margin-left: -2em;

  747.   padding-left: 3em;

  748. }

  749. 

  750. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  751.   margin-left: -3em;

  752.   padding-left: 4em;

  753. }

  754. 

  755. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  756.   margin-left: -4em;

  757.   padding-left: 5em;

  758. }

  759. 

  760. .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {

  761.   margin-left: -5em;

  762.   padding-left: 6em;

  763. }

  764. 

  765. .select2-container--default .select2-results__option--highlighted[aria-selected] {

  766.   background-color: #5897fb;

  767.   color: white;

  768. }

  769. 

  770. .select2-container--default .select2-results__group {

  771.   cursor: default;

  772.   display: block;

  773.   padding: 6px;

  774. }

  775. 

  776. .select2-container--classic .select2-selection--single {

  777.   background-color: #f7f7f7;

  778.   border: 1px solid #aaa;

  779.   border-radius: 4px;

  780.   outline: 0;

  781.   background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);

  782.   background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);

  783.   background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);

  784.   background-repeat: repeat-x;

  785.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);

  786. }

  787. 

  788. .select2-container--classic .select2-selection--single:focus {

  789.   border: 1px solid #5897fb;

  790. }

  791. 

  792. .select2-container--classic .select2-selection--single .select2-selection__rendered {

  793.   color: #444;

  794.   line-height: 28px;

  795. }

  796. 

  797. .select2-container--classic .select2-selection--single .select2-selection__clear {

  798.   cursor: pointer;

  799.   float: right;

  800.   font-weight: bold;

  801.   margin-right: 10px;

  802. }

  803. 

  804. .select2-container--classic .select2-selection--single .select2-selection__placeholder {

  805.   color: #999;

  806. }

  807. 

  808. .select2-container--classic .select2-selection--single .select2-selection__arrow {

  809.   background-color: #ddd;

  810.   border: none;

  811.   border-left: 1px solid #aaa;

  812.   border-top-right-radius: 4px;

  813.   border-bottom-right-radius: 4px;

  814.   height: 26px;

  815.   position: absolute;

  816.   top: 1px;

  817.   right: 1px;

  818.   width: 20px;

  819.   background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);

  820.   background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);

  821.   background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);

  822.   background-repeat: repeat-x;

  823.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);

  824. }

  825. 

  826. .select2-container--classic .select2-selection--single .select2-selection__arrow b {

  827.   border-color: #888 transparent transparent transparent;

  828.   border-style: solid;

  829.   border-width: 5px 4px 0 4px;

  830.   height: 0;

  831.   left: 50%;

  832.   margin-left: -4px;

  833.   margin-top: -2px;

  834.   position: absolute;

  835.   top: 50%;

  836.   width: 0;

  837. }

  838. 

  839. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {

  840.   float: left;

  841. }

  842. 

  843. .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {

  844.   border: none;

  845.   border-right: 1px solid #aaa;

  846.   border-radius: 0;

  847.   border-top-left-radius: 4px;

  848.   border-bottom-left-radius: 4px;

  849.   left: 1px;

  850.   right: auto;

  851. }

  852. 

  853. .select2-container--classic.select2-container--open .select2-selection--single {

  854.   border: 1px solid #5897fb;

  855. }

  856. 

  857. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {

  858.   background: transparent;

  859.   border: none;

  860. }

  861. 

  862. .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {

  863.   border-color: transparent transparent #888 transparent;

  864.   border-width: 0 4px 5px 4px;

  865. }

  866. 

  867. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {

  868.   border-top: none;

  869.   border-top-left-radius: 0;

  870.   border-top-right-radius: 0;

  871.   background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);

  872.   background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);

  873.   background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);

  874.   background-repeat: repeat-x;

  875.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);

  876. }

  877. 

  878. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {

  879.   border-bottom: none;

  880.   border-bottom-left-radius: 0;

  881.   border-bottom-right-radius: 0;

  882.   background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);

  883.   background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);

  884.   background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);

  885.   background-repeat: repeat-x;

  886.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);

  887. }

  888. 

  889. .select2-container--classic .select2-selection--multiple {

  890.   background-color: white;

  891.   border: 1px solid #aaa;

  892.   border-radius: 4px;

  893.   cursor: text;

  894.   outline: 0;

  895. }

  896. 

  897. .select2-container--classic .select2-selection--multiple:focus {

  898.   border: 1px solid #5897fb;

  899. }

  900. 

  901. .select2-container--classic .select2-selection--multiple .select2-selection__rendered {

  902.   list-style: none;

  903.   margin: 0;

  904.   padding: 0 5px;

  905. }

  906. 

  907. .select2-container--classic .select2-selection--multiple .select2-selection__clear {

  908.   display: none;

  909. }

  910. 

  911. .select2-container--classic .select2-selection--multiple .select2-selection__choice {

  912.   background-color: #e4e4e4;

  913.   border: 1px solid #aaa;

  914.   border-radius: 4px;

  915.   cursor: default;

  916.   float: left;

  917.   margin-right: 5px;

  918.   margin-top: 5px;

  919.   padding: 0 5px;

  920. }

  921. 

  922. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {

  923.   color: #888;

  924.   cursor: pointer;

  925.   display: inline-block;

  926.   font-weight: bold;

  927.   margin-right: 2px;

  928. }

  929. 

  930. .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {

  931.   color: #555;

  932. }

  933. 

  934. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {

  935.   float: right;

  936.   margin-left: 5px;

  937.   margin-right: auto;

  938. }

  939. 

  940. .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {

  941.   margin-left: 2px;

  942.   margin-right: auto;

  943. }

  944. 

  945. .select2-container--classic.select2-container--open .select2-selection--multiple {

  946.   border: 1px solid #5897fb;

  947. }

  948. 

  949. .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {

  950.   border-top: none;

  951.   border-top-left-radius: 0;

  952.   border-top-right-radius: 0;

  953. }

  954. 

  955. .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {

  956.   border-bottom: none;

  957.   border-bottom-left-radius: 0;

  958.   border-bottom-right-radius: 0;

  959. }

  960. 

  961. .select2-container--classic .select2-search--dropdown .select2-search__field {

  962.   border: 1px solid #aaa;

  963.   outline: 0;

  964. }

  965. 

  966. .select2-container--classic .select2-search--inline .select2-search__field {

  967.   outline: 0;

  968.   box-shadow: none;

  969. }

  970. 

  971. .select2-container--classic .select2-dropdown {

  972.   background-color: #fff;

  973.   border: 1px solid transparent;

  974. }

  975. 

  976. .select2-container--classic .select2-dropdown--above {

  977.   border-bottom: none;

  978. }

  979. 

  980. .select2-container--classic .select2-dropdown--below {

  981.   border-top: none;

  982. }

  983. 

  984. .select2-container--classic .select2-results > .select2-results__options {

  985.   max-height: 200px;

  986.   overflow-y: auto;

  987. }

  988. 

  989. .select2-container--classic .select2-results__option[role=group] {

  990.   padding: 0;

  991. }

  992. 

  993. .select2-container--classic .select2-results__option[aria-disabled=true] {

  994.   color: grey;

  995. }

  996. 

  997. .select2-container--classic .select2-results__option--highlighted[aria-selected] {

  998.   background-color: #3875d7;

  999.   color: #fff;

  1000. }

  1001. 

  1002. .select2-container--classic .select2-results__group {

  1003.   cursor: default;

  1004.   display: block;

  1005.   padding: 6px;

  1006. }

  1007. 

  1008. .select2-container--classic.select2-container--open .select2-dropdown {

  1009.   border-color: #5897fb;

  1010. }