/* Navbar Tweak */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse {
    background: none;
  }
}

@media (max-width: 992px) {

    .navbar-absolute-lg-top .navbar-absolute-top-scroller,
    .navbar-absolute-sm-top .navbar-absolute-top-scroller,
    .navbar-absolute-top .navbar-absolute-top-scroller {
      max-height: 75vh;
      background-color: #fff;
      overflow: hidden;
      overflow-y: auto;
    }
  }


.notifications-dropdown {
  width: 25rem;
  opacity: 1;
  max-height: 30rem;
  overflow-y: auto;
}
@media (max-width: 400px) {
.notifications-dropdown {
  width: 21rem;
  opacity: 1;
  max-height: 30rem;
  overflow-y: auto;
}
}

.no-box-shadow {
  border: solid 1px rgba(55,
        125,
        255, 0);
  box-shadow:none;
    transition: box-shadow 0.5s ease-in-out;
      -webkit-transition: box-shadow 0.5s ease-in-out;
      -moz-transition: box-shadow 0.5s ease-in-out;
      -o-transition: box-shadow 0.5s ease-in-out;
      -ms-transition: box-shadow 0.5s ease-in-out;
}

.comment-highlight {
      color: #1e2022;
        border: solid 1px rgba(55,
            125,
            255, .25);
        outline: 0;
        box-shadow: 0 0 1rem 0 rgba(55,
          125,
          255, .25);

  /* box-shadow: 0px 0px 10px rgba(55,
      125,
      255, 0.6); */
  transition: box-shadow 0.5s ease-in-out;
  -webkit-transition: box-shadow 0.5s ease-in-out;
  -moz-transition: box-shadow 0.5s ease-in-out;
  -o-transition: box-shadow 0.5s ease-in-out;
  -ms-transition: box-shadow 0.5s ease-in-out;
}

.task-highlight {
  box-shadow: 0px 0px 20px rgba(55,
      125,
      255, 0.6);
  transition: box-shadow 0.5s ease-in-out;
  -webkit-transition: box-shadow 0.5s ease-in-out;
  -moz-transition: box-shadow 0.5s ease-in-out;
  -o-transition: box-shadow 0.5s ease-in-out;
  -ms-transition: box-shadow 0.5s ease-in-out;
}

.task-highlight.complete {
  box-shadow: 0px 0px 20px rgba(0, 201, 167, 0.6);
}

.btn-soft-primary.disabled,
.btn-soft-primary:disabled {
  color: white;
}

/* Transition for new Notifications bg */
 .list-group-item.form-check-select {
   transition: background-color 0.5s ease;
 }

/* Custom Input Range Styling */
input[type="range"] {
  appearance: none;
  /* Hides the slider so that custom slider can be made */
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
  background: transparent;
  /* Otherwise white in Chrome */
  border: none;
  border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type="range"]::-webkit-slider-thumb {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -10px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 0 0.1875rem 0.375rem rgba(140, 152, 164, 0.5);
}

/* All the same stuff for Firefox */
input[type="range"]::-moz-range-thumb {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0.1875rem 0.375rem rgba(140, 152, 164, 0.5);
}

/* All the same stuff for IE */
input[type="range"]::-ms-thumb {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0.1875rem 0.375rem rgba(140, 152, 164, 0.5);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 4px;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 4px;
}

input[type="range"]::-ms-fill-lower {
  background: #1a6aff;
}

input[type="range"]:focus::-ms-fill-lower {
  background: #1a6aff;
}

input[type="range"]::-ms-fill-upper {
  background: rgb(103, 119, 136);
}

input[type="range"]:focus::-ms-fill-upper {
  background: rgb(103, 119, 136);
}

/* Blockquote */
blockquote.blockquote {
  padding-left: 1rem;
  border-left: 0.1875rem solid rgba(33, 50, 91, .1);
}

/* Custom xs spinner */
.spinner-border-sm {
  width: 0.7rem;
  height: 0.7rem;
  border-width: 0.15em;
}

/* Comments Container */
.comments-container {
  max-height: 400px;
  overflow-y: auto;
  --mask: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1%,
        rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%) 100% 100% / 100% 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}


/* Custom Step Item */
.step-item:last-of-type {
  margin-bottom:0
}

/* Quill Custom CSS */
.quill-custom .ql-editor {
word-break: break-word;
}

.quill-custom .ql-editor p {
      font-size: 14px;
      margin-bottom: 1rem;
      word-break: break-word;
    }

  .quill-custom.disabled .ql-editor, .quill-custom.disabled .ql-toolbar {
    background-color:rgba(113, 134, 157, .1) !important
  }

.checklist-button {
  position: relative;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}

.checklist-button:before {
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius:100%;
  z-index: -1;
  opacity: .2;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}

a .checklist-button:hover:before {
  opacity: 1;
}

.checklist-button:hover:active {
}

.checklist-button:hover:active:before {
  filter: blur(5px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* Theme Fixes */
.btn-soft-danger.disabled,
.btn-soft-danger:disabled,
.btn-soft-success:disabled,
.btn-soft-warning:disabled,
.btn-soft-success.disabled,
.btn-soft-warning.disabled,
.btn-soft-secondary:disabled,
.btn-soft-secondary.disabled {
  color:white;
}

@media (max-width: 768px) {
  .mobile-border-0 {
    border-width: 0px;
    /* Adjust the border width as needed */
  }
}

/* HTML */
html {
  scroll-behavior: smooth;
}

/* Container */
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  max-width: 1340px;
}
}
/* Text Align Problems */
.text-left {
  text-align: left !important
}

.text-right {
  text-align: right !important
}

/* Reminder Form */
input.reminder-form {
  border: none;
  background: none;
  padding: 0.425rem .5rem;
  margin: 0;
  width: 2em;
}

span.reminder-span {
    font-weight: 800;
    color: #1e2022;
    padding: 0rem 0.25rem;
    margin: 0rem -0.25rem;
}

span.reminder-span:focus {
  background-color: #fff;
  background-clip: padding-box;
  border: 0.0625rem solid rgba(33, 50, 91, .1);
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.3125rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }

select.reminder-select {
  background-image:none;
  width: fit-content;
}


/* Modal Transition CSS */
.modal.show .modal-dialog {
-webkit-transition: max-width 0.3s ease;
  /* For Safari 3.1 to 6.0 */
  -moz-transition: max-width 0.3s ease;
  /* For Firefox 4 to 15 */
  -o-transition: max-width 0.3s ease;
  /* For Opera 10.5 to 12.0 */
  -ms-transition: max-width 0.3s ease;
  /* For Internet Explorer 10 */
  transition: max-width 0.3s ease;
  /* Standard syntax */
}

/* Welcome Modal */
    .video-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
    }
  
    .video-container .video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

/* Popover */
.cursor-pointer {
  cursor: pointer;
}

/* Popover */
.svelte-easy-popover {
  z-index: 1;
}

/* Reminder Checkbox */
.form-check-input.success:checked {
  background-color: #00c9a7;
  border-color: rgba(0, 201, 167, .25);
}

.form-control.bg-soft-success {
  border-color: rgba(0, 201, 167, .25);
}

/* Reminder Checkbox */
input[type=number] {
  background:none;
}

/* Modal Tweak */
.modal {
  display:block;
  background-color:rgba(0, 0, 0, .3);
}

.modal.modal-white {
  background-color: rgba(255, 255, 255, .3);
}

.modal.modal-obscure {
  backdrop-filter: blur(100px);
}

/* Loading Spinner */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #377dff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* Django Browser Calendar Styling */
input[type="date"]::-webkit-datetime-edit {
  display: inline;
}

/* Browser Color Styling Field */
.form-control.brand-color {
  height: 2.725rem;
  padding: 0;
}

/* Custom Task Table Button Styling */
div.task .btn {
  position:static;
}

/* Custom Task Table Button Styling */
div.task .btn {
  /* not sure it's working on deadline/show-task-details buttons */
  -webkit-transition: width 600ms ease-in-out;
  -moz-transition: width 600ms ease-in-out;
  -ms-transition: width 600ms ease-in-out;
  -o-transition: width 600ms ease-in-out;
  transition: width 600ms ease-in-out;
  min-width: max-content;
}

div.task .btn i {
  transition: margin-left 0.2s ease;
}


/* Task View Options Menu Styling */
.form-check-input.sm {
  width: 1.5em;
  height: 0.81em;
}

.form-check-input.md {
  margin-top: 0em;
  margin-right: 0rem;
  width: 2.5em;
  height: 1.5em;
}

/* Icon Flipped */

.icon-flipped {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

/* Client Review Page */
.list-comment:first-child {
  margin-top: -2.2rem;
}

.list-comment-item {
  margin-top: 2.2rem;
}

.step-active .step-content.card {
  box-shadow: 0 0rem 1.5rem 0 rgba(55, 125, 255, 0.25);
}

.step-active .step-icon {
  box-shadow: 0 0rem 1.5rem 0 rgba(55, 125, 255, 0.25);
}

button.step-icon i {
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out;
    -moz-transition: opacity 200ms ease-in-out;
    -ms-transition: opacity 200ms ease-in-out;
    -o-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}

button.step-icon:hover i {
  opacity: 1;
}

/* Task View Svelte Styling */

div.task.complete {
  background-color: rgba(0, 201, 167, 0.1) !important;
}

div.task.is-assigned-to-client {
  background-color: rgba(55, 125, 255, 0.1) !important;
}

div.task.is-assigned-to-client:hover {
  background-color: rgba(55, 125, 255, 0.15) !important;
}

div.task.complete:hover {
  --bs-table-hover-bg: rgba(0, 201, 167, 0.1) !important;
}

/* TASK DETAIL CSS TRANSITION */
/* Initial state for the element (hidden and positioned out of view) */
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* State when the element is shown (slides into view) */
.slide-enter-to,
.slide-leave {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
}

div.task-details:hover {
  --bs-table-hover-bg: none;
}

div.task-details:hover p {
  color: #404040
}

div.task-details:hover small {
  color: #777777
}

div.task-details {
  -webkit-box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.05);
}

div.task.is_hidden_from_client {
  background: repeating-linear-gradient(45deg,
      rgba(231, 234, 243, 0.1),
      rgba(231, 234, 243, 0.1) 10px,
      rgba(231, 234, 243, 0.25) 10px,
      rgba(231, 234, 243, 0.25) 20px);
}

div.task.is_hidden_from_client.complete {
  background: repeating-linear-gradient(45deg,
        rgba(0, 201, 167, 0),
        rgba(0, 201, 167, 0) 10px,
        rgba(0, 201, 167, .06) 10px,
        rgba(0, 201, 167, .06) 20px);
}

div.task-details .nav-segment.nav-pills .nav-link {
  font-size: .8em;
}

div.task .handle {
  cursor:grab;
}

div.task .hidden {
  visibility:hidden;
  cursor:grabbing;
}

/* Drop indicator for tasks */

div.wrapper.drop-indicator .task-grid-row {
  position: relative;
  /* To position the ::after pseudo-element relative to the element */
}
div.wrapper.drop-indicator.top .task-grid-row {
  background: linear-gradient(to bottom, #007bff 3px, transparent 3px);
}

div.wrapper.drop-indicator.bottom .task-grid-row {
  background: linear-gradient(to top, #007bff 3px, transparent 3px);
}

div.wrapper.drop-indicator.top .task-grid-row .cell:first-child::before {
  content: '';
  position: absolute;
  top: -7%;
  left: -0.3rem;
  /* transform: translateY(-50%); */
  width: 10px;
  height: 10px;
  background-color: white;
  border: 3px solid #007bff;
  border-radius: 50%;
}

div.wrapper.drop-indicator.bottom .task-grid-row .cell:first-child::before {
  content: '';
  position: absolute;
  top: 86%;
  left: -0.3rem;
  /* transform: translateY(-50%); */
  width: 10px;
  height: 10px;
  background-color: white;
  border: 3px solid #007bff;
  border-radius: 50%;
}

/* New Task Styling */

.input-card.new-task:not(:has(input.task-name:focus, .project-selector:focus)) {
  background: none;
  box-shadow: none;
}

input.task-name.new {
  font-size:.875rem;
  width:auto;
  margin: auto;
  margin-left:0;
  margin-right:0;
}
/* Hidden Input Styling */

input.stealth-text-input {
  border: 0.0625rem solid rgba(33, 50, 91, 0);
  box-shadow: 0 0 1rem 0 rgba(140 152 164 / 0);
  background: none;
  padding: 0.425rem 1rem;
  border-radius: 0.3125rem;
  line-height: .8;
  width: 100%;
  outline: none;
}

input.stealth-text-input:focus,
input.stealth-text-input:focus-visible {
    color: #1e2022;
      background-clip: padding-box;
      border: 0.0625rem solid rgba(33, 50, 91, 0.1);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      box-shadow: 0 0 1rem 0 rgb(140 152 164 / 25%);
      display: inline-block;
}
/* Task Styling */

input.task-name {
  border: none;
  background: none;
  padding: 0.425rem 1rem;
  margin: -0.75rem -0.75rem;
  width: 100%;
}


input.task-name:focus-visible {
  border: none;
  box-shadow: none;
  outline: none;
}

input.task-name.editable {
  color: #1e2022;
  width: 100%;
  padding: 0.425rem 1rem;
  margin: -0.75rem -0.75rem;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border: 0.0625rem solid rgba(33, 50, 91, 0.1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.3125rem;
  background-color: #fff;
  outline: 0;
  box-shadow: 0 0 1rem 0 rgb(140 152 164 / 25%);
  display: inline-block;
}
/* Mobile TextArea Task-Name */
textarea.task-name {
    border: 0.0625rem solid rgba(33, 50, 91, 0);
  background: none;
  outline: none;
  width: 100%;
    -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
        outline: 0;
}

textarea.task-name:focus-visible {
  border: none;
  box-shadow: none;
  outline: none;
    -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
        outline: 0;
}

textarea.task-name.editable {
  background-clip: padding-box;
  border: 0.0625rem solid rgba(33, 50, 91, 0.1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: 0 0 1rem 0 rgb(140 152 164 / 25%);
}

div.task-details textarea.form-control {
  resize: none;
}

/* Project Kickoff Email */
input.kickoff-email, textarea.kickoff-email {
  border: 0.0625rem solid rgba(33, 50, 91, 0);
  background: none;
  width: 100%;
  box-shadow: 0 0 1rem 0 rgb(140 152 164 / 0%);
  resize: none;
  overflow: hidden;
}


input.kickoff-email:focus-visible, textarea.kickoff-email:focus-visible {
  border: 0.0625rem solid rgba(33, 50, 91, 0);
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
}

input.kickoff-email:focus, textarea.kickoff-email:focus {
  background-clip: padding-box;
  border: 0.0625rem solid rgba(33, 50, 91, 0.1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: 0 0 1rem 0 rgb(140 152 164 / 25%);
  }

/* Custom Dropdown Menu Styling */
.dropdown-menu .dropdown-item.dropdown-toggle.below::after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
-webkit-transition: transform 0.5s 0s ease;
  -moz-transition: transform 0.5s 0s ease;
  -o-transition: transform 0.5s 0s ease;
  transition: transform 0.5s 0s ease;
}

.dropdown-menu .dropdown-item.dropdown-toggle.above::after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transition: transform 0.5s 0s ease;
    -moz-transition: transform 0.5s 0s ease;
    -o-transition: transform 0.5s 0s ease;
    transition: transform 0.5s 0s ease;
}

/* CSS for DatePicker */

table .deadline-btn {
  max-width: 100px;
}

.sdt-calendar-colors, .task-message {
  --sdt-primary: #286090;
  --sdt-color: #000;
  --sdt-bg-main: #fff;
  --sdt-bg-today: var(--sdt-primary);
  --sdt-bg-clear: #dc3545;
  --sdt-today-bg: #1e486d;
  --sdt-clear-color: #dc3545;
  --sdt-btn-bg-hover: #eee;
  --sdt-btn-header-bg-hover: #dfdfdf;
  --sdt-clock-bg: #eeeded;
  --sdt-clock-bg-minute: rgb(238, 237, 237, 0.25);
  --sdt-clock-bg-shadow: 0 0 128px 2px #ddd inset;
  --sdt-shadow: rgba(0, 0, 0, 0.25);
}

.std-calendar-wrap {
  width: 280px;
  background-color: var(--sdt-bg-main);
  box-shadow: 0 1px 6px var(--sdt-shadow);
  border-radius: 4px;
  padding: 0.25rem 0.25rem 0.5rem;
  color: var(--sdt-color);
}

.std-calendar-wrap.is-popup {
  box-shadow: 0 1px 6px var(--sdt-shadow);
}

.task-message.is-popup {
  max-width: 70vw;
  width: 500px;
}

.task-message.warning.is-popup {
  max-width: 70vw;
  width: 400px;
}

.task-message.assign-client.is-popup {
  max-width: 70vw;
  width: 400px;
}

.std-btn-row {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-evenly;
}

.sdt-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  border-radius: 0.2rem;
}

.sdt-today-btn {
  background-color: var(--sdt-primary);
  color: var(--sdt-today-color, var(--sdt-bg-main));
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  border-radius: 0.2rem;
  border: 1px solid var(--sdt-today-bg);
}

.sdt-today-btn[disabled] {
  opacity: 0.75;
}

.sdt-today-btn:focus,
.sdt-today-btn:active,
.sdt-today-btn:hover:not([disabled]) {
  background-color: var(--sdt-today-bg);
}

.sdt-clear-btn {
  border: 1px solid var(--sdt-clear-color);
  background-color: transparent;
  color: var(--sdt-clear-color);
}

.sdt-clear-btn:focus,
.sdt-clear-btn:active:not([disabled]),
.sdt-clear-btn:hover:not([disabled]) {
  background-color: var(--sdt-clear-color);
  color: var(--sdt-clear-hover-color, var(--sdt-bg-main));
}


input[type="color"].set-organization.brand-color {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 0;
  border: none;
}

input[type="color"].set-organization::-webkit-color-swatch-wrapper {
  padding: 0;
  border:none
}

input[type="color"].set-organization::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.croppie-container {
    width: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: none;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(255, 255, 255, 1);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
    display:none;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.rounded-croppie .cr-boundary .cr-vp-square {
    border-radius: .5rem
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}