/* 
    For View Only users the controls are disabled and have grey color
*/

button[viewonly],
html input[viewonly] {
  cursor: default;
}

.form-control[viewonly],
.form-control[viewonly],
fieldset[viewonly] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

input[type="radio"][viewonly],
input[type="checkbox"][viewonly],
input[type="radio"].viewonly,
input[type="checkbox"].viewonly,
fieldset[viewonly] input[type="radio"],
fieldset[viewonly] input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: none;
}
.radio-inline.viewonly,
.checkbox-inline.viewonly,
fieldset[viewonly] .radio-inline,
fieldset[viewonly] .checkbox-inline {
  cursor: not-allowed;
}
.radio.viewonly label,
.checkbox.viewonly label,
fieldset[viewonly] .radio label,
fieldset[viewonly] .checkbox label {
  cursor: not-allowed;
}

.btn.viewonly,
.btn[viewonly],
fieldset[viewonly] .btn {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-default.viewonly,
.btn-default[viewonly],
fieldset[viewonly] .btn-default,
.btn-default.viewonly:hover,
.btn-default[viewonly]:hover,
fieldset[viewonly] .btn-default:hover,
.btn-default.viewonly:focus,
.btn-default[viewonly]:focus,
fieldset[viewonly] .btn-default:focus,
.btn-default.viewonly:active,
.btn-default[viewonly]:active,
fieldset[viewonly] .btn-default:active,
.btn-default.viewonly.active,
.btn-default[viewonly].active,
fieldset[viewonly] .btn-default.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-primary.viewonly,
.btn-primary[viewonly],
fieldset[viewonly] .btn-primary,
.btn-primary.viewonly:hover,
.btn-primary[viewonly]:hover,
fieldset[viewonly] .btn-primary:hover,
.btn-primary.viewonly:focus,
.btn-primary[viewonly]:focus,
fieldset[viewonly] .btn-primary:focus,
.btn-primary.viewonly:active,
.btn-primary[viewonly]:active,
fieldset[viewonly] .btn-primary:active,
.btn-primary.viewonly.active,
.btn-primary.active[viewonly],
fieldset[viewonly] .btn-primary.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-success.viewonly,
.btn-success[viewonly],
fieldset[viewonly] .btn-success,
.btn-success.viewonly:hover,
.btn-success[viewonly]:hover,
fieldset[viewonly] .btn-success:hover,
.btn-success.viewonly:focus,
.btn-success[viewonly]:focus,
fieldset[viewonly] .btn-success:focus,
.btn-success.viewonly:active,
.btn-success[viewonly]:active,
fieldset[viewonly] .btn-success:active,
.btn-success.viewonly.active,
.btn-success[viewonly].active,
fieldset[viewonly] .btn-success.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-info.viewonly,
.btn-info[viewonly],
fieldset[viewonly] .btn-info,
.btn-info.viewonly:hover,
.btn-info[viewonly]:hover,
fieldset[viewonly] .btn-info:hover,
.btn-info.viewonly:focus,
.btn-info[viewonly]:focus,
fieldset[viewonly] .btn-info:focus,
.btn-info.viewonly:active,
.btn-info[viewonly]:active,
fieldset[viewonly] .btn-info:active,
.btn-info.viewonly.active,
.btn-info[viewonly].active,
fieldset[viewonly] .btn-info.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-warning.viewonly,
.btn-warning[viewonly],
fieldset[viewonly] .btn-warning,
.btn-warning.viewonly:hover,
.btn-warning[viewonly]:hover,
fieldset[viewonly] .btn-warning:hover,
.btn-warning.viewonly:focus,
.btn-warning[viewonly]:focus,
fieldset[viewonly] .btn-warning:focus,
.btn-warning.viewonly:active,
.btn-warning[viewonly]:active,
fieldset[viewonly] .btn-warning:active,
.btn-warning.viewonly.active,
.btn-warning[viewonly].active,
fieldset[viewonly] .btn-warning.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

.btn-danger.viewonly,
.btn-danger[viewonly],
fieldset[viewonly] .btn-danger,
.btn-danger.viewonly:hover,
.btn-danger[viewonly]:hover,
fieldset[viewonly] .btn-danger:hover,
.btn-danger.viewonly:focus,
.btn-danger[viewonly]:focus,
fieldset[viewonly] .btn-danger:focus,
.btn-danger.viewonly:active,
.btn-danger[viewonly]:active,
fieldset[viewonly] .btn-danger:active,
.btn-danger.viewonly.active,
.btn-danger[viewonly].active,
fieldset[viewonly] .btn-danger.active {
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

a.viewonly, input[type=file].viewonly, select.viewonly {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
  pointer-events: none;
  background-color: #ccc;
  color: #999;
  border-color: #ccc;
}

/* Disable Vue.js controls inside data-vue-permission="write" wrapper div */
.vue-ViewOnly [data-permission="write"] {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
    background-color: #ccc;
    color: #999;
    border-color: #ccc;
}

/* jQuery-autocomplete styles */
.autocomplete-suggestions { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 1px solid  #4aa3df; 
    background: #f0f0f0; 
    cursor: default; 
    overflow: auto; 
}
.autocomplete-suggestion { 
    padding: 2px 5px; 
    white-space: nowrap; 
    overflow: hidden; 
}
.autocomplete-no-suggestion { 
    padding: 2px 5px;
}
.autocomplete-selected { 
    background: #4aa3df;
    color: #ffffff 
}
.autocomplete-selected strong { 
    color: #ffffff;
}
.autocomplete-suggestions strong { 
    font-weight: bold; 
}
.autocomplete-group { 
    padding: 2px 5px; 
    font-weight: bold; 
    font-size: 16px; 
    color: #000; 
    display: block; 
    border-bottom: 1px solid #000; 
}

.dropdown-align-right:before {
    right: 13px;
    left: auto !important;
}

/* Align the language dropdown in top menu */
#languageDropdown:before {
    right: 13px;
    left:auto !important;
}
.word-wrap {
    word-break: break-all;
}
.md-modal.top-20 {
    top: 20%;
}