/* Calin's base .css */

html {
  /* 1 */
  font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
  background: #242424;
  color: #666;
}

/*
* Remove the margin in all browsers.
*/
body {
  margin: 0;
}

/* Links
  ========================================================================== */
/*
  * Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
a {
  -webkit-text-decoration-skip: objects;
}
/*
  * Remove the outline on focused links when they are also active or hovered
  */
a:active,
a:hover {
  outline: none;
}
/*
  * Style
  */
a,
.link {
  color: none;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
.link:hover {
  color: none;
  text-decoration: none;
}
/* Embedded content
========================================================================== */
/*
* Remove the gap between embedded content and the bottom of their containers.
*/
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
* 1. Add responsiveness.
* 2. Auto-scale the height. Only needed if `height` attribute is present.
* 3. Corrects responsive `max-width` behavior if padding and border are used.
* 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
*/
canvas,
img,
video {
  /* 1 */
  max-width: 100%;
  /* 2 */
  height: auto;
  /* 3 */
  box-sizing: border-box;
}
/* 4 */
@supports (display: block) {
  svg {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}
/*
* Hide the overflow in IE.
*/
svg:not(:root) {
  overflow: hidden;
}
/*
* Hide `alt` text for lazy load images
* Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
*/
img:not([src]) {
  visibility: hidden;
}
/*
* Iframe
* Remove border in all browsers
*/
iframe {
  border: 0;
}

/* Headings
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 20px 0px 20px 0px;
font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
font-weight: bold;
color: #ccc;
text-transform: none;
}
/*
* Sizes
*/
h1 {
font-size: 2.2rem;
line-height: 1.2;
}
h2 {
font-size: 1.7rem;
line-height: 1.3;
}
h3 {
font-size: 1.5rem;
line-height: 1.4;
}
h4 {
font-size: 1.25rem;
line-height: 1.4;
}
h5 {
font-size: 16px;
line-height: 1.4;
}
h6 {
font-size: 0.875rem;
line-height: 1.4;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
h1 {
  font-size: 2.6rem;
}
h2 {
  font-size: 2rem;
}
}
/* Lists
========================================================================== */
ul,
ol {
  padding: 0px;
}
/*
* Reset margin for nested lists
*/
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul {
  margin: 0;
}
/* Description lists
========================================================================== */
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
/* Horizontal rules
========================================================================== */
/*
* 1. Add the correct box sizing and height in Firefox.
* 2. Show the overflow in Edge and IE.
* 3. Add the correct text-align in Edge and IE.
* 4. Style
*/
hr {
  /* 1 */
  box-sizing: content-box;
  height: 0;
  /* 2 */
  overflow: visible;
  /* 3 */
  text-align: inherit;
  /* 4 */
  margin: 20px 0px 20px 0px;
  border: 0;
  border-top: 1px solid #e0e0e0;
}
/* ========================================================================
  Component: Button
========================================================================== */
/*
* 1. Remove margins in Chrome, Safari and Opera.
* 2. Remove borders for `button`.
* 3. Address `overflow` set to `hidden` in IE.
* 4. Correct `font` properties and `color` not being inherited for `button`.
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
* 6. Style
* 7. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
*    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
* 8. Align text if button has a width
* 9. Required for `a`.
*/
.button {
  /* 1 */
  margin: 0;
  /* 2 */
  border: none;
  /* 3 */
  overflow: visible;
  /* 4 */
  font: inherit;
  color: inherit;
  /* 5 */
  text-transform: none;
  /* 6 */
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 20px;
  vertical-align: middle;
  font-size: 1em;
  /* 7 */
  line-height: 1.2em;
  /* 8 */
  text-align: center;
  /* 9 */
  text-decoration: none;
  text-transform: none;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color, border-color;
}
.button:not(:disabled) {
  cursor: pointer;
}
/*
  * Remove the inner border and padding in Firefox.
  */
.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/* Hover */
.button:hover {
  /* 9 */
  text-decoration: none;
}
/* Focus */
.button:focus {
  outline: none;
}
/* OnClick + Active */
/* Style modifiers
  ========================================================================== */
/*
  * Default
  */
.button {
  background-color: transparent;
  color: #bbb;
  border: 1px solid #bbb;
}
/* Hover + Focus */
.button:hover,
.button:focus {
  background-color: transparent;
  color: #ddd;
  border-color: #ddd;
}
/* OnClick + Active */
.button:active,
.button.active {
  background-color: transparent;
  color: #333;
  border-color: #000;
}
/*
  * Disabled
  * The same for all style modifiers
  */
.button:disabled {
  background-color: transparent;
  color: #999;
  border-color: #e5e5e5;
}
/* Text modifiers
  ========================================================================== */
/*
  * Text
  * 1. Reset
  * 2. Style
  */
.button-text {
  /* 1 */
  padding: 0;
  line-height: 1.5;
  background: none;
  /* 2 */
  color: #333;
  font-weight: bold;
  position: relative;
}
.button-text::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  border-bottom: 1px solid #333;
  transition: right 0.3s ease-out;
}
/* Hover + Focus */
.button-text:hover,
.button-text:focus {
  color: #333;
}
.button-text:hover::before,
.button-text:focus::before {
  right: 0;
}
/* Disabled */
.button-text:disabled {
  color: #999;
}
.button-text:disabled::before {
  display: none;
}
/*
  * Link
  * 1. Reset
  * 2. Style
  */
.button-link {
  /* 1 */
  padding: 0;
  line-height: 1.5;
  background: none;
  /* 2 */
  color: #1e87f0;
}
/* Hover + Focus */
.button-link:hover,
.button-link:focus {
  color: #ccc;
  text-decoration: underline;
}
/* Disabled */
.button-link:disabled {
  color: #999;
  text-decoration: none;
}
/* Group
  ========================================================================== */
/*
  * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
  * 2. Behave like button
  * 3. Create position context
  */
.button-group {
  /* 1 */
  display: inline-flex;
  /* 2 */
  vertical-align: middle;
  /* 3 */
  position: relative;
}
/* Group
      ========================================================================== */
/*
      * Collapse border
      */
.button-group > .button:nth-child(n+2),
.button-group > div:nth-child(n+2) .button {
  margin-left: -1px;
}
/*
      * Create position context to superimpose the successor elements border
      * Known issue: If you use an `a` element as button and an icon inside,
      * the active state will not work if you click the icon inside the button
      * Workaround: Just use a `button` or `input` element as button
      */
.button-group .button:hover,
.button-group .button:focus,
.button-group .button:active,
.button-group .button.active {
  position: relative;
  z-index: 1;
}

/*jquery-ui changes*/

.ui-button, .ui-button:hover, .ui-button:focus, .ui-button:active  {
	border: none;
  background: transparent;
  outline-offset: 0px;
  outline: none;
}
.ui-widget-overlay {
  background: #333;
  opacity: .8;
  filter: Alpha(Opacity=80);
}
.ui-widget-header {
  border: none;
  border-bottom: 1px solid #e0e0e0;
  background-color: #e8e8e8;
  color: #666;
  font-weight: bold;
  font-size: 14px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  z-index: 1;
}
.ui-widget textarea {
  color: #555;
  font-size: 14px;
  font-weight: normal;
}
.ui-dialog {
  padding: 0px;
  background-color: #f6f6f6;
}
.ui-dialog .ui-dialog-titlebar-close {
  right: .7em;
}
.ui-dialog .ui-dialog-titlebar {
  padding: 10px 15px;
}
.ui-dialog .ui-dialog-content {
  padding: 20px 15px 15px;
}
label {
  font-size: 15px;
  color: #777;
  font-weight: bold;
  margin: 0px;
  padding: 5px 0px;
  width: 100%;
  box-sizing: border-box;
}
input, textarea, button {
  font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
  font-size: 15px;
  font-weight: bold;
  color: #444;
  display: block;
  padding: 12px 10px 12px 10px;
  margin: 0px 0px 0px 0px;
  border: 1px solid #e0e0e0;
  border-image: none;
  width: 100%;
  box-sizing: border-box;
  resize: none;
}
select {
  font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
  font-size: 12px;
  font-weight: normal;
  color: #444;
  display: block;
  padding: 6px;
  margin: 0px 0px 0px 0px;
  border: 1px solid #e0e0e0;
  border-image: none;
  width: 100%;
  box-sizing: border-box;
  resize: none;
}
input:focus, textarea:focus, select:focus, :focus {
  outline-offset: 0px;
  outline: none;
}
input::placeholder {/* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
}
input::-webkit-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}
input::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("images/Icons/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("images/Icons/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("images/Icons/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("images/Icons/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("images/Icons/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("images/Icons/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("images/Icons/ui-icons_777777_256x240.png");
}

/* Resizable handle changes */
.ui-resizable-s {
  text-align: center;
  bottom: 0px;
  height: 10px;
}
.workload-container:hover .ui-resizable-s,
.workload-container:active .ui-resizable-s {
  background-image: url("images/Icons/resize-handle-horz.png");
  background-repeat: no-repeat;
  background-position: center center;
}
.ui-resizable-s:hover,
.ui-resizable-s:active  {
  background-color: #404040;
}

/* Format Select2 changes */

.select2-container--default.select2-container .select2-selection--multiple {
  margin: 0px;
  padding: 3px;
  background-color: transparent;
  border: solid 1px transparent;
  /* border: solid 1px #f6f6f6; */
}
.select2-container--default.select2-container:hover .select2-selection--multiple, .select2-container--default.select2-container:active .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple {
  /* margin-right:15px; */
  border: solid 1px  #f0f0f0;
  border-bottom: solid 1px  #d8d8d8;
  background-color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  font-weight: normal;
  font-size: 12px;
  padding: 3px 5px;
  margin: 5px 7px 0px 0px;
  color: #444;
  background-color: #f0f0f0;
  border-radius:0px;
  border: 1px solid #e0e0e0;
}
.select2-container .select2-search--inline {
  background-color: transparent;
  border: none;
  margin: 0px;
  padding: 5px 0px 0px;
}

/* The Modal Form (background) */
.modal-form {
  z-index: 1; /* Sit on top */
  position: fixed; /* Stay in place */
  display: none; /* Hidden by default */
  /* padding-top: 20%; */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  text-align: left;
}
/* Modal Form Overlay */
.modal-form-overlay {
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: #333;
  opacity: .6;
  filter: Alpha(Opacity=60);
}
/* Modal Form Content */
.modal-form-content {
  position: absolute;
  left: calc(50% - 160px);
  top: 50px;
  background-color: #f6f6f6;
  margin: auto auto;
  padding: 0px;
}
/* Modal Form Header */
.modal-form-header {
  padding: 15px 15px 12px;
  margin-bottom: 10px; 
  background-color: #e8e8e8;
  color: #555;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
}
/* Modal Form Body */
.modal-form-body {
  padding: 30px 15px 15px;
  background-color: transparent;
}
/* Detail Modal Form (background) */
.detail-modal-form {
  z-index: 1; /* Sit on top */
  position: fixed; /* Stay in place */
  display: none; /* Hidden by default */
  /* padding-top: 20%; */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  text-align: left;
}
/* Detail Modal Form Overlay */
.detail-modal-form-overlay {
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: #333;
  opacity: .6;
  filter: Alpha(Opacity=60);
}
/* Detail Modal Form Content */
.detail-modal-form-content {
  position: absolute;
  left: calc(50% - 480px);
  top: 50px;
  background-color: #f6f6f6;
  margin: auto auto;
  padding: 0px;
}
/* Detail Modal Form Header */
.detail-modal-form-header {
  padding: 15px 15px 12px;
  margin-bottom: 10px; 
  background-color: #e8e8e8;
  color: #555;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
}
/* Detail Modal Form Body */
.detail-modal-form-body {
  padding: 30px 15px 15px;
  background-color: transparent;
}
/* The Close Button */
.close-btn {
  float: right;
  background-image: url("images/Icons/close-16px.png");
  background-repeat: no-repeat;
  width: 16px;
  height:16px;
}
.close-btn:hover,
.close-btn:focus {
  background-image: url("images/Icons/close-dark-16px.png");
  cursor: pointer;
}
.close-btn:active {
  background-image: url("images/Icons/close-16px.png");
}
/* Login/Register Form Content */
.login-form-content {
  margin: 100px auto;
  width: 320px;
  background-color: #f6f6f6;
  padding: 0px;
  /* box-shadow: 0px 0px 20px 0px #ccc; */
}
/* Login/Register Form Header */
.login-form-header {
  padding: 15px;
  margin-bottom: 10px; 
  background-color: #e8e8e8;
  color: #555;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
}
/* Login/Register Form Body */
.login-form-body {
  padding: 15px 15px 15px;
  background-color: transparent;
}
.validation-summary_error {
  color: red;
  font-weight: normal;
  font-size: 14px;
}
.validation-summary_error li {
  margin-left: 15px;
}
/* The Modal Form (background) */
.modal-filter {
  z-index: 1; /* Sit on top */
  position: fixed; /* Stay in place */
  background-color: #1a1a1a;
  right: 0;
  top: 55px;
  width: 0px; /* Closed width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  text-align: left;
  transition: width 0.3s;
}
/* Modal Form Content */
.modal-filter-content {
  position: absolute;
  width: 320px;
  background-color: #1a1a1a;
  margin: auto auto;
  padding: 0px;
}
/* Modal Form Header */
.modal-filter-header {
  padding: 15px 15px 12px;
  margin-bottom: 10px; 
  background-color: #1a1a1a;
  color: #ccc;
  font-weight: normal;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
}
/* Modal Form Body */
.modal-filter-body {
  padding: 30px 15px 15px;
  background-color: transparent;
  color: #ccc;
  font-size: 12px;
}
/* The Modal Form (background) */
.modal-notification {
  z-index: 1; /* Sit on top */
  position: fixed; /* Stay in place */
  display: none; /* Hidden by default */
  /* padding-top: 20%; */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  text-align: left;
}
/* Modal Form Overlay */
.modal-notification-overlay {
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: #333;
  opacity: .6;
  filter: Alpha(Opacity=60);
}
/* Modal Form Content */
.modal-notification-content {
  position: absolute;
  width: 800px;
  left: calc(50% - 400px);
  top: 50px;
  background-color: #f6f6f6;
  margin: auto auto;
  padding: 0px;
}
/* Modal Form Header */
.modal-notification-header {
  padding: 15px 15px 12px;
  margin-bottom: 10px; 
  background-color: #e8e8e8;
  color: #555;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
}
/* Modal Form Body */
.modal-notification-body {
  padding: 30px 15px 15px;
  background-color: transparent;
}