smc

smc/temp/css/jquery.typeahead.css

@@ -0,0 +1,587 @@
+.typeahead__container {
+  /**
+     * Restore the font weight unset by the previous rule.
+     */
+  /**
+     * Show the overflow in IE.
+     * 1. Show the overflow in Edge.
+     */
+  /**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+  /**
+     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+     *    controls in Android 4.
+     * 2. Correct the inability to style clickable types in iOS and Safari.
+     */
+  /**
+     * Remove the inner border and padding in Firefox.
+     */
+  /**
+     * Restore the focus styles unset by the previous rule.
+     */
+  /**
+     * Change the border, margin, and padding in all browsers (opinionated).
+     */
+  /**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+  /**
+     * Remove the default vertical scrollbar in IE.
+     */
+  /**
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
+     */
+  /**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+  /**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+  /**
+     * Correct the text style of placeholders in Chrome, Edge, and Safari.
+     */
+  /**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+}
+
+.typeahead__container button,
+.typeahead__container input,
+.typeahead__container optgroup,
+.typeahead__container select,
+.typeahead__container textarea {
+  font: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+.typeahead__container optgroup {
+  font-weight: bold;
+}
+
+.typeahead__container button,
+.typeahead__container input {
+  /* 1 */
+  overflow: visible;
+}
+
+.typeahead__container button,
+.typeahead__container select {
+  /* 1 */
+  text-transform: none;
+}
+
+.typeahead__container button,
+.typeahead__container html [type="button"],
+.typeahead__container [type="reset"],
+.typeahead__container [type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+}
+
+.typeahead__container button::-moz-focus-inner,
+.typeahead__container [type="button"]::-moz-focus-inner,
+.typeahead__container [type="reset"]::-moz-focus-inner,
+.typeahead__container [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.typeahead__container button:-moz-focusring,
+.typeahead__container [type="button"]:-moz-focusring,
+.typeahead__container [type="reset"]:-moz-focusring,
+.typeahead__container [type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+.typeahead__container fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+.typeahead__container legend {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+.typeahead__container textarea {
+  overflow: auto;
+}
+
+.typeahead__container [type="checkbox"],
+.typeahead__container [type="radio"] {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+.typeahead__container [type="number"]::-webkit-inner-spin-button,
+.typeahead__container [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.typeahead__container ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+.typeahead__container ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+.typeahead__container {
+  position: relative;
+  font: 1rem Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.typeahead__container * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+}
+
+.typeahead__query {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+}
+
+.typeahead__filter {
+  position: relative;
+}
+
+.typeahead__filter button {
+  min-width: 100%;
+  white-space: nowrap;
+}
+
+.typeahead__filter button:after {
+  display: inline-block;
+  margin-left: 4px;
+  width: 0;
+  height: 0;
+  vertical-align: -2px;
+  content: "";
+  border: 4px solid;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.typeahead__field {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.typeahead__button button {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.typeahead__field {
+  color: #555;
+}
+
+.typeahead__field input,
+.typeahead__field textarea,
+.typeahead__field [contenteditable],
+.typeahead__field .typeahead__hint {
+  display: block;
+  width: 100%;
+  line-height: 1.25;
+  min-height: calc(0.5rem * 2 + 1.25rem + 2px);
+  padding: 0.5rem 0.75rem;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 2px 0 0 2px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.typeahead__field input:focus, .typeahead__field input:active,
+.typeahead__field textarea:focus,
+.typeahead__field textarea:active,
+.typeahead__field [contenteditable]:focus,
+.typeahead__field [contenteditable]:active,
+.typeahead__field .typeahead__hint:focus,
+.typeahead__field .typeahead__hint:active {
+  border-color: #66afe9;
+}
+
+.typeahead__container.hint .typeahead__field input,
+.typeahead__container.hint .typeahead__field textarea,
+.typeahead__container.hint .typeahead__field [contenteditable] {
+  background: transparent;
+}
+
+.typeahead__container.hint .typeahead__query > :last-child, .typeahead__hint {
+  background: #fff;
+}
+
+.typeahead__container button {
+  display: inline-block;
+  margin-bottom: 0;
+  text-align: center;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  line-height: 1.25;
+  padding: 0.5rem 0.75rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #555;
+}
+
+.typeahead__container button:hover, .typeahead__container button:focus {
+  color: #3c3c3c;
+  background-color: #f5f5f5;
+  border-color: #b3b3b3;
+}
+
+.typeahead__container button:active, .typeahead__container button.active {
+  background-image: none;
+}
+
+.typeahead__container button:focus, .typeahead__container button:active {
+  border-color: #66afe9;
+}
+
+.typeahead__container input.disabled,
+.typeahead__container input[disabled],
+.typeahead__container button.disabled,
+.typeahead__container button[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.typeahead__container .typeahead__field input,
+.typeahead__container .typeahead__field textarea,
+.typeahead__container .typeahead__field [contenteditable],
+.typeahead__container .typeahead__field .typeahead__hint,
+.typeahead__container .typeahead__field .typeahead__label-container {
+  padding-right: 32px;
+}
+
+.typeahead__filter, .typeahead__button {
+  z-index: 1;
+}
+
+.typeahead__filter button, .typeahead__button button {
+  margin-left: -1px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.typeahead__filter:hover, .typeahead__filter:active, .typeahead__filter:focus, .typeahead__button:hover, .typeahead__button:active, .typeahead__button:focus {
+  z-index: 1001;
+}
+
+.typeahead__filter:hover button:focus, .typeahead__filter:hover button:active, .typeahead__filter:active button:focus, .typeahead__filter:active button:active, .typeahead__filter:focus button:focus, .typeahead__filter:focus button:active, .typeahead__button:hover button:focus, .typeahead__button:hover button:active, .typeahead__button:active button:focus, .typeahead__button:active button:active, .typeahead__button:focus button:focus, .typeahead__button:focus button:active {
+  z-index: 1001;
+}
+
+.typeahead__filter + .typeahead__button button {
+  margin-left: -2px;
+}
+
+.typeahead__container.filter .typeahead__filter {
+  z-index: 1001;
+}
+
+.typeahead__list, .typeahead__dropdown {
+  position: absolute;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  text-align: left;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-clip: padding-box;
+}
+
+.typeahead__result.detached .typeahead__list {
+  position: relative;
+  z-index: 1041;
+  top: initial;
+  left: initial;
+}
+
+.typeahead__dropdown {
+  right: 0;
+  left: initial;
+  z-index: 1001;
+}
+
+.typeahead__list > li {
+  position: relative;
+  border-top: solid 1px #ccc;
+}
+
+.typeahead__list > li:first-child {
+  border-top: none;
+}
+
+.typeahead__list .typeahead__item[disabled] > a,
+.typeahead__dropdown .typeahead__dropdown-item[disabled] > a {
+  cursor: not-allowed;
+  color: #bababa;
+  background-color: #fafafa;
+}
+
+.typeahead__list .typeahead__item > a,
+.typeahead__dropdown .typeahead__dropdown-item > a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  clear: both;
+  color: #333;
+  text-decoration: none;
+}
+
+.typeahead__list .typeahead__item:not([disabled]) > a:hover,
+.typeahead__list .typeahead__item:not([disabled]) > a:focus,
+.typeahead__list .typeahead__item:not([disabled]).active > a,
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:hover,
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:focus,
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active > a {
+  background-color: #f5f5f5;
+  color: #3c3c3c;
+}
+
+.typeahead__list.empty > li {
+  padding: 0.5rem 0.75rem;
+  color: #333;
+}
+
+.typeahead__list > .typeahead__group {
+  border-color: #bfdef6;
+  font-weight: bold;
+}
+
+.typeahead__list > .typeahead__group:first-child {
+  border-top: solid 1px #bfdef6;
+}
+
+.typeahead__list > .typeahead__group > a,
+.typeahead__list > .typeahead__group > a:hover,
+.typeahead__list > .typeahead__group > a:focus,
+.typeahead__list > .typeahead__group.active > a {
+  cursor: default;
+  color: #17639f;
+  background: #ecf5fc;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  clear: both;
+  text-decoration: none;
+}
+
+.typeahead__list > li.typeahead__group + li.typeahead__item {
+  border-color: #bfdef6;
+}
+
+.typeahead__container.result .typeahead__list,
+.typeahead__container.filter .typeahead__dropdown,
+.typeahead__container.hint .typeahead__hint,
+.typeahead__container.backdrop + .typeahead__backdrop {
+  display: block !important;
+}
+
+.typeahead__container .typeahead__list,
+.typeahead__container .typeahead__dropdown,
+.typeahead__container .typeahead__hint,
+.typeahead__container + .typeahead__backdrop {
+  display: none !important;
+}
+
+.typeahead__dropdown li:last-child {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: solid 1px #ccc;
+}
+
+.typeahead__cancel-button {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+  line-height: 1.25;
+  padding: 0.5rem 0.75rem;
+  visibility: hidden;
+}
+
+.typeahead__label .typeahead__cancel-button {
+  visibility: visible;
+  right: 4px;
+}
+
+.typeahead__container.cancel:not(.loading) .typeahead__cancel-button, .typeahead__label .typeahead__cancel-button {
+  visibility: visible;
+}
+
+.typeahead__container.cancel:not(.loading) .typeahead__cancel-button:hover, .typeahead__label .typeahead__cancel-button:hover {
+  color: #d0021b;
+}
+
+.typeahead__search-icon {
+  padding: 0 1.25rem;
+  width: 16px;
+  height: 16px;
+  background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
+}
+
+.typeahead__container.loading .typeahead__query:before, .typeahead__container.loading .typeahead__query:after {
+  -webkit-transition: all 0s linear, opacity 0.2s ease;
+  -o-transition: all 0s linear, opacity 0.2s ease;
+  transition: all 0s linear, opacity 0.2s ease;
+  position: absolute;
+  z-index: 3;
+  content: "";
+  top: 50%;
+  right: 0.55em;
+  margin-top: -0.675rem;
+  width: 1.35rem;
+  height: 1.35rem;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 500rem;
+  border-style: solid;
+  border-width: 0.1em;
+}
+
+.typeahead__container.loading .typeahead__query:before {
+  border-color: rgba(0, 0, 0, 0.35);
+}
+
+.typeahead__container.loading .typeahead__query:after {
+  -webkit-animation: button-spin 0.6s linear;
+  animation: button-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  border-color: #fff transparent transparent;
+  -webkit-box-shadow: 0 0 0 1px transparent;
+  box-shadow: 0 0 0 1px transparent;
+}
+
+@-webkit-keyframes button-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes button-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.typeahead__label-container {
+  list-style: none;
+  position: absolute;
+  padding-top: calc(1rem * 0.375);
+  padding-left: 6px;
+  width: 100%;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.typeahead__label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: calc(1rem * 0.875);
+  position: relative;
+  background: #ecf5fc;
+  border: solid 1px #c2e0ff;
+  padding-left: 4px;
+  border-radius: 2px;
+  margin-right: 4px;
+  margin-bottom: calc(1rem * 0.375);
+}
+
+.typeahead__label > * {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.typeahead__label .typeahead__cancel-button {
+  line-height: normal;
+  height: auto;
+  position: static;
+  padding-top: calc(1rem * 0.25 - 1px);
+  padding-bottom: calc(1rem * 0.25 + 1px);
+  padding-left: 6px;
+  padding-right: 6px;
+  margin-left: 4px;
+  font-size: calc(1rem * 0.875);
+  border-left: solid 1px #c2e0ff;
+}
+
+.typeahead__label .typeahead__cancel-button:hover {
+  background-color: #d5e9f9;
+}

smc/temp/css/jquery.typeahead.scss

@@ -0,0 +1,620 @@
+// FORM RESETS ----------------- https://github.com/necolas/normalize.css/ ---------------------------------------------
+
+.typeahead__container {
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        font: inherit; /* 1 */
+        margin: 0; /* 2 */
+    }
+
+    /**
+     * Restore the font weight unset by the previous rule.
+     */
+
+    optgroup {
+        font-weight: bold;
+    }
+
+    /**
+     * Show the overflow in IE.
+     * 1. Show the overflow in Edge.
+     */
+
+    button,
+    input { /* 1 */
+        overflow: visible;
+    }
+
+    /**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+
+    button,
+    select { /* 1 */
+        text-transform: none;
+    }
+
+    /**
+     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+     *    controls in Android 4.
+     * 2. Correct the inability to style clickable types in iOS and Safari.
+     */
+
+    button,
+    html [type="button"], /* 1 */
+    [type="reset"],
+    [type="submit"] {
+        -webkit-appearance: button; /* 2 */
+    }
+
+    /**
+     * Remove the inner border and padding in Firefox.
+     */
+
+    button::-moz-focus-inner,
+    [type="button"]::-moz-focus-inner,
+    [type="reset"]::-moz-focus-inner,
+    [type="submit"]::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+
+    /**
+     * Restore the focus styles unset by the previous rule.
+     */
+
+    button:-moz-focusring,
+    [type="button"]:-moz-focusring,
+    [type="reset"]:-moz-focusring,
+    [type="submit"]:-moz-focusring {
+        outline: 1px dotted ButtonText;
+    }
+
+    /**
+     * Change the border, margin, and padding in all browsers (opinionated).
+     */
+
+    fieldset {
+        border: 1px solid #c0c0c0;
+        margin: 0 2px;
+        padding: 0.35em 0.625em 0.75em;
+    }
+
+    /**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+
+    legend {
+        box-sizing: border-box; /* 1 */
+        color: inherit; /* 2 */
+        display: table; /* 1 */
+        max-width: 100%; /* 1 */
+        padding: 0; /* 3 */
+        white-space: normal; /* 1 */
+    }
+
+    /**
+     * Remove the default vertical scrollbar in IE.
+     */
+
+    textarea {
+        overflow: auto;
+    }
+
+    /**
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
+     */
+
+    [type="checkbox"],
+    [type="radio"] {
+        box-sizing: border-box; /* 1 */
+        padding: 0; /* 2 */
+    }
+
+    /**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    /**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+
+    /**
+     * Correct the text style of placeholders in Chrome, Edge, and Safari.
+     */
+
+    ::-webkit-input-placeholder {
+        color: inherit;
+        opacity: 0.54;
+    }
+
+    /**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button; /* 1 */
+        font: inherit; /* 2 */
+    }
+}
+
+// VARIABLES -----------------------------------------------------------------------------------------------------------
+
+$typeahead-font-size: 1rem !default;
+$typeahead-line-height: 1.25 !default;
+$typeahead-font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif !default;
+$typeahead-primary-color: #66afe9 !default;
+$typeahead-cancel-color: #d0021b !default;
+$typeahead-radius: 2px !default;
+$typeahead-shadow: false !default; // true / false
+$typeahead-dropdown-spacing: 5px !default;
+$typeahead-outline-color: $typeahead-primary-color !default;
+$typeahead-loading-size: 1.35rem !default;
+
+$typeahead-padding-y: 0.5rem !default;
+$typeahead-padding-x: 0.75rem !default;
+
+$typeahead-color: #555 !default;
+$typeahead-border-color: #ccc !default;
+
+$typeahead-group-color: darken($typeahead-primary-color, 30%) !default;
+$typeahead-group-background: lighten($typeahead-primary-color, 30%) !default;
+$typeahead-group-border-color: lighten($typeahead-primary-color, 20%) !default;
+
+$typeahead-item-color: #333 !default;
+$typeahead-item-background: #fff !default;
+$typeahead-item-hover-background: #f5f5f5 !default;
+$typeahead-item-disabled-color: #bababa !default;
+$typeahead-item-disabled-background: #fafafa !default;
+
+$typeahead-label-color: #3a99fc !default;
+$typeahead-label-font-size: calc(#{$typeahead-font-size} * 0.875) !default;
+$typeahead-label-border-color: #c2e0ff !default;
+$typeahead-label-background: lighten($typeahead-primary-color, 30%) !default;
+
+// TYPEAHEAD -----------------------------------------------------------------------------------------------------------
+
+.typeahead__ {
+    &container {
+        position: relative;
+        font: $typeahead-font-size $typeahead-font-family;
+    }
+
+    &container * {
+        box-sizing: border-box;
+        outline: 0;
+    }
+
+    &query {
+        position: relative;
+        z-index: 2;
+        width: 100%;
+    }
+
+    &filter {
+        position: relative;
+        button {
+            min-width: 100%;
+            white-space: nowrap;
+            &:after {
+                display: inline-block;
+                margin-left: 4px;
+                width: 0;
+                height: 0;
+                vertical-align: -2px;
+                content: "";
+                border: 4px solid;
+                border-right-color: transparent;
+                border-bottom-color: transparent;
+                border-left-color: transparent;
+            }
+        }
+    }
+
+    &field {
+        display: flex;
+        position: relative;
+        width: 100%;
+    }
+
+    &button button {
+        border-top-right-radius: $typeahead-radius;
+        border-bottom-right-radius: $typeahead-radius;
+    }
+
+    &field {
+        // #193 If applied to input, it overrides the placeholder color on IE10/11
+        color: $typeahead-color;
+        input,
+        textarea,
+        [contenteditable],
+        .typeahead__hint {
+            display: block;
+            width: 100%;
+            line-height: $typeahead-line-height;
+            min-height: calc(#{$typeahead-padding-y} * 2 + 1.25rem + 2px);
+            padding: $typeahead-padding-y $typeahead-padding-x;
+            background: #fff;
+            border: 1px solid $typeahead-border-color;
+            border-radius: $typeahead-radius 0 0 $typeahead-radius;
+            appearance: none;
+            box-sizing: border-box;
+            @if ($typeahead-shadow) {
+                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            }
+
+            &:focus,
+            &:active {
+                border-color: $typeahead-outline-color;
+            }
+
+            //border-color: #007eff;
+            //box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
+        }
+    }
+
+    &container.hint .typeahead__field {
+        input,
+        textarea,
+        [contenteditable] {
+            background: transparent;
+        }
+    }
+
+    &container.hint .typeahead__query > :last-child,
+    &hint {
+        background: #fff;
+    }
+
+    &container button {
+        display: inline-block;
+        margin-bottom: 0;
+        text-align: center;
+        touch-action: manipulation;
+        cursor: pointer;
+        background-color: #fff;
+        border: 1px solid $typeahead-border-color;
+        line-height: $typeahead-line-height;
+        padding: $typeahead-padding-y $typeahead-padding-x;
+        user-select: none;
+        color: $typeahead-color;
+        @if ($typeahead-shadow) {
+            box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
+        }
+
+        &:hover,
+        &:focus {
+            color: darken($typeahead-color, 10%);
+            background-color: $typeahead-item-hover-background;
+            border-color: darken($typeahead-border-color, 10%);
+        }
+
+        &:active,
+        &.active {
+            background-image: none;
+            @if ($typeahead-shadow) {
+                box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+            }
+        }
+
+        &:focus,
+        &:active {
+            border-color: $typeahead-outline-color;
+        }
+    }
+
+    &container {
+        input.disabled,
+        input[disabled],
+        button.disabled,
+        button[disabled] {
+            cursor: not-allowed;
+            pointer-events: none;
+            opacity: 0.65;
+            box-shadow: none;
+            background-color: #fff;
+            border-color: $typeahead-border-color;
+        }
+
+        //&.multiselect,
+        //&.loading,
+        //&.cancel {
+        .typeahead__field {
+            input,
+            textarea,
+            [contenteditable],
+            .typeahead__hint,
+            .typeahead__label-container {
+                padding-right: 32px;
+            }
+        }
+        //}
+    }
+
+    &filter,
+    &button {
+        z-index: 1;
+        button {
+            margin-left: -1px;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            z-index: 1001;
+            button {
+                &:focus,
+                &:active {
+                    z-index: 1001;
+                }
+            }
+        }
+    }
+
+    &filter + &button {
+        button {
+            margin-left: -2px;
+        }
+    }
+
+    &container.filter .typeahead__filter {
+        z-index: 1001;
+    }
+
+    &list,
+    &dropdown {
+        position: absolute;
+        //top: 100%;
+        left: 0;
+        z-index: 1000;
+        width: 100%;
+        min-width: 160px;
+        padding: $typeahead-dropdown-spacing 0;
+        margin: 2px 0 0;
+        list-style: none;
+        text-align: left;
+        background-color: #fff;
+        border: 1px solid $typeahead-border-color;
+        border-radius: $typeahead-radius;
+        background-clip: padding-box;
+        @if ($typeahead-shadow) {
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+        }
+    }
+
+    &result.detached .typeahead__list {
+        position: relative;
+        z-index: 1041;
+        top: initial;
+        left: initial;
+    }
+
+    &dropdown {
+        right: 0;
+        left: initial;
+        z-index: 1001;
+    }
+
+    &list > li {
+        position: relative;
+        border-top: solid 1px $typeahead-border-color;
+        &:first-child {
+            border-top: none;
+        }
+    }
+
+    &list .typeahead__item,
+    &dropdown .typeahead__dropdown-item {
+        &[disabled] {
+            > a {
+                cursor: not-allowed;
+                color: $typeahead-item-disabled-color;
+                background-color: $typeahead-item-disabled-background;
+            }
+        }
+
+        > a {
+            display: block;
+            padding: $typeahead-padding-y $typeahead-padding-x;
+            clear: both;
+            color: $typeahead-item-color;
+            text-decoration: none;
+        }
+
+        &:not([disabled]) {
+            > a:hover,
+            > a:focus,
+            &.active > a {
+                background-color: $typeahead-item-hover-background;
+                color: darken($typeahead-color, 10%);
+            }
+        }
+    }
+
+    &list.empty {
+        > li {
+            padding: $typeahead-padding-y $typeahead-padding-x;
+            color: $typeahead-item-color;
+        }
+    }
+
+    &list > .typeahead__group {
+        border-color: $typeahead-group-border-color;
+        font-weight: bold;
+
+        &:first-child {
+            @if ($typeahead-dropdown-spacing > 0) {
+                border-top: solid 1px $typeahead-group-border-color;
+            }
+        }
+        > a,
+        > a:hover,
+        > a:focus,
+        &.active > a {
+            cursor: default;
+            color: $typeahead-group-color;
+            background: $typeahead-group-background;
+            display: block;
+            padding: $typeahead-padding-y $typeahead-padding-x;
+            clear: both;
+            text-decoration: none;
+        }
+    }
+
+    &list > {
+        li.typeahead__group + li.typeahead__item {
+            border-color: $typeahead-group-border-color;
+        }
+    }
+
+    &container {
+        &.result .typeahead__list,
+        &.filter .typeahead__dropdown,
+        &.hint .typeahead__hint,
+        &.backdrop + .typeahead__backdrop {
+            display: block !important;
+        }
+        .typeahead__list,
+        .typeahead__dropdown,
+        .typeahead__hint,
+        + .typeahead__backdrop {
+            display: none !important;
+        }
+    }
+
+    &dropdown li:last-child {
+        margin-top: $typeahead-dropdown-spacing;
+        padding-top: $typeahead-dropdown-spacing;
+        border-top: solid 1px $typeahead-border-color;
+    }
+
+    &cancel-button {
+        user-select: none;
+        position: absolute;
+        right: 0;
+        cursor: pointer;
+        line-height: 1.25;
+        padding: $typeahead-padding-y $typeahead-padding-x;
+        visibility: hidden;
+        .typeahead__label & {
+            visibility: visible;
+            right: 4px;
+        }
+    }
+
+    &container.cancel:not(.loading),
+    &label {
+        .typeahead__cancel-button {
+            visibility: visible;
+            &:hover {
+                color: $typeahead-cancel-color;
+            }
+        }
+    }
+
+    &search-icon {
+        padding: 0 1.25rem;
+        width: 16px;
+        height: 16px;
+        // Reference: http://www.flaticon.com/free-icon/musica-searcher_70376
+        background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
+    }
+
+    &container.loading .typeahead__query {
+        &:before,
+        &:after {
+            transition: all 0s linear, opacity 0.2s ease;
+            position: absolute;
+            z-index: 3;
+            content: "";
+            top: 50%;
+            right: 0.55em;
+            margin-top: -($typeahead-loading-size / 2);
+            width: $typeahead-loading-size;
+            height: $typeahead-loading-size;
+            box-sizing: border-box;
+            border-radius: 500rem;
+            border-style: solid;
+            border-width: 0.1em;
+        }
+
+        &:before {
+            border-color: rgba(0, 0, 0, 0.35);
+        }
+
+        &:after {
+            animation: button-spin 0.6s linear;
+            animation-iteration-count: infinite;
+            border-color: #fff transparent transparent;
+            box-shadow: 0 0 0 1px transparent;
+        }
+
+        @keyframes button-spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
+    &label-container {
+        list-style: none;
+        position: absolute;
+        padding-top: calc(#{$typeahead-font-size} * 0.375);
+        padding-left: 6px;
+        width: 100%;
+        flex-wrap: wrap;
+        display: flex;
+    }
+
+    &label {
+        display: flex;
+        font-size: $typeahead-label-font-size;
+        position: relative;
+        background: $typeahead-label-background;
+        border: solid 1px $typeahead-label-border-color;
+        padding-left: 4px;
+        border-radius: $typeahead-radius;
+        margin-right: 4px;
+        margin-bottom: calc(#{$typeahead-font-size} * 0.375);
+
+        > * {
+            align-self: center;
+        }
+
+        .typeahead__cancel-button {
+            line-height: normal;
+            height: auto;
+            position: static;
+            padding-top: calc(#{$typeahead-font-size} * 0.25 - 1px);
+            padding-bottom: calc(#{$typeahead-font-size} * 0.25 + 1px);
+            padding-left: 6px;
+            padding-right: 6px;
+            margin-left: 4px;
+            font-size: $typeahead-label-font-size;
+            border-left: solid 1px $typeahead-label-border-color;
+            &:hover {
+                background-color: darken($typeahead-label-background, 5%);
+            }
+        }
+    }
+}

smc/temp/css/owl.carousel.min.css

@@ -0,0 +1,10 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(../images/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
+.owl-diot.owl-theme .owl-dots {bottom: 80px; position: absolute; width: 100%; }
+.owl-diot.owl-theme .owl-dots .owl-dot span {width: 7px; height: 7px; margin:4px;}
+.owl-diot.owl-theme .owl-dots .owl-dot.active span,
+.owl-diot.owl-theme .owl-dots .owl-dot:hover span{background: red !important;}

smc/temp/css/owl.theme.default.min.css

@@ -0,0 +1 @@
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

smc/temp/css/video-player.css

@@ -0,0 +1,237 @@
+.video-player {
+    width: 100%;
+    height: 100%;
+    background: #111;
+}
+.player-container {
+    padding: 0px;
+    max-width: 100%;
+    margin: auto;
+    overflow: hidden;
+    
+    min-height: calc(100vh);
+    display: flex;
+    align-items: center;
+    position: relative;
+    
+}
+
+.player-container.lightbox {
+    position: fixed;
+    top:0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+}
+.player-container.lightbox .player {
+    width: 70%;
+    padding-bottom: 37%;
+    margin:0 auto;
+}
+.player {
+    width: 100%;
+    height: 0;
+    padding-bottom: 48.25%;
+    box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
+    position: relative;
+    overflow: hidden;
+    background: #000000;
+}
+.player:fullscreen {
+    padding-bottom: 100vh;
+}
+.player:-webkit-full-screen {
+    padding-bottom: 100vh;
+}
+.player:-moz-full-screen {
+    padding-bottom: 100vh;
+}
+.player:-ms-fullscreen  {
+    padding-bottom: 100vh;
+}
+.player video {
+    width: 100%;
+    height: auto;
+    position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.controls {
+    padding: 0;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 48px;
+    box-sizing: border-box;
+    background: linear-gradient(
+        180deg,
+        rgba(37, 37, 37, 0) 10%,
+        rgba(37, 37, 37, 0.6) 80%
+    );
+    transition: all 0.2s ease-in 5s;
+}
+.player:hover .controls {
+    bottom: 0;
+    transition: all 0.2s ease-out;
+}
+.time {
+    position: absolute;
+    right: 30px;
+    bottom: 100%;
+    padding-bottom: 14px;
+    color: #fff;
+}
+.progress {
+    height: 8px;
+    width: calc(100% - 40px);
+    background: rgba(60, 60, 60, 0.6);
+    margin: auto;
+    border-radius: 6px;
+    position: absolute;
+    left: 20px;
+    bottom: 100%;
+    transition: height 0.1s ease-in-out;
+}
+.progress:hover {
+    height: 10px;
+}
+.progress-filled {
+    background: #fff;
+    width: 0%;
+    height: 100%;
+    border-radius: 6px;
+    transition: all 0.1s; 
+}
+.controls-main {
+    width: calc(100% - 40px);
+    margin: auto;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.controls-left,
+.controls-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.controls-left {
+    margin-left: 10px;
+}
+.controls-right {
+    margin-right: 10px;
+    justify-content: flex-end;
+}
+.volume {
+    display: flex;
+    align-items: center;
+}
+.volume-btn {
+    margin-right: 10px;
+}
+.volume-btn #volume-off, .volume-btn #volume-high {
+    opacity: 0;
+}
+.volume-btn.loud #volume-high{
+    opacity: 1;
+}
+.volume-btn.muted #volume-off {
+    opacity: 1;
+}
+.volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
+    opacity: 0;
+}
+.volume-slider {
+    height: 8px;
+    width: 80px;
+    background: rgba(60, 60, 60, 0.6);;
+    border-radius: 6px;
+    position: relative;
+}
+.volume-filled {
+    background: #fff;
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+    transition: width 0.2s ease-in-out;
+}
+.volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
+    background: #fff;
+}
+button {
+}
+.play-btn {
+    width: 30px;
+    height: 30px;
+    position: relative;
+    margin: auto;
+    transform: rotate(-90deg) scale(0.8);
+    transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
+        transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
+}
+.play-btn.paused {
+    transform: rotate(0deg);
+}
+.play-btn:before,
+.play-btn:after {
+    content: "";
+    position: absolute;
+    background: white;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transition: inherit;
+}
+.play-btn:before {
+    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
+    shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
+}
+.play-btn:after {
+    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
+    shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
+}
+.play-btn.paused:before {
+    -webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
+    shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
+}
+.play-btn.paused:after {
+    -webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
+    shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
+}
+button:focus {
+    outline: none;
+}
+.speed-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    margin-right: 20px;
+    text-align: center;
+}
+.speed-list li {
+    color: #fff;
+    padding: 5px;
+    cursor: default;
+}
+.speed-list li:hover,
+.speed-list li.active {
+    color: #fff;
+    font-weight: bold;
+}
+.fullscreen {
+    display: flex;
+    justify-content: center;
+}
+.close-video-player {
+    position: fixed;
+    top:25px;
+    right: 25px;
+    z-index: 10;
+}
+.close-video-player i {
+    font-size: 40px; 
+    color: #fff;
+}