/*---- Book Now Button  */
.custom-button-wrapper {
   outline: none;
}

.custom-button {
   cursor: pointer;
}

.button.custom-button {
   width: auto;
   border-radius: 0;
}

.button.custom-button > span {
   display: flex;
   align-items: center;
   /* default table border spacing */
   padding: 2px;
}

.button.custom-button-rounded {
   border-radius: 10px;
}

.custom-button-icon {
   /* fixes specific designs issue - before they was trying to set sizes
   on a <td> element (which doesn't change anything) but now the element is
   replaced with an inline-block and the sizes are affecting the layout */
   width: inherit !important;
   height: inherit !important;
   padding-right: 5px;
}

.custom-button-caption {
   padding-right: 5px;
   font-size: 18px;
   text-decoration: none;
   font-weight: normal;
   font-style: normal;
}

img.custom-button {
   max-width: 640px;
   max-height: 200px;
}

.sk-shapp-progress {
   padding: 10px 0px;
   display: none;
}

.sk-shapp-rounded {
   border-radius: 10px;
}

.sk-shapp-booknow-icon { padding-right: 5px; }
.sk-shapp-booknow-caption { font-size: 18px; padding-right: 5px; }
.sk-shapp-businesshours { margin-top: 15px; text-align: left; }
.sk-shapp-booknow-button { cursor: pointer; width: auto; }
.sk-shapp-title-selectservice { margin-bottom: 10px; }
.sk-shapp-button-disabled { opacity:0.15; }
.sk-shapp-title-selectstaff { margin: 16px 0 6px 0; font-size: 18px; }
.sk-shapp-title-selecttime { margin-bottom: 5px; }
.sk-shapp-timezonenote {
   margin: 20px 0;
   text-align: center;
}
.sk-shapp-title-confirmbooking { margin-bottom: 2px; }
.sk-shapp-form .sk-shapp-step-content .sk-shapp-summarytitle {
   margin: 15px 0;
   font-size: 20px;
}

.sk-shapp-confirm-form {
   margin-bottom: 15px;
}

.sk-shapp-field {
   background-color: #f3f3f3;
   border: none;
   border-radius: 4px;
   background-image: none;
   height: 38px;
   color: #0c0c0c;
}

.sk-shapp-field-name { width: 230px; }
.sk-shapp-field-email { width: 230px; }
.sk-shapp-label-phone { width: 230px; }
.sk-shapp-field-comments {
   width: 350px;
   height: 100px;
   resize: none;
}

.sk-shapp-confirm-form .sk-shapp-field-wrapper .sk-shapp-label-custom-consent {
   display: inline-block;
}

.sk-shapp-label-custom-consent input[type='checkbox'] {
   position: relative;
   top: 1px;
}

.sk-shapp-label-custom-consent span {
   padding-left: 2px;
}

.sk-shapp-icon-info {
   box-sizing: border-box;
   position: relative;
   display: inline-block;
   transform: scale(0.9);
   width: 20px;
   height: 20px;
   border: 2px solid;
   border-radius: 50%;
   top: 4px;
   margin: 0 5px;
   color: #00abde;
}

.sk-shapp-icon-info:hover {
   opacity: 0.5;
}

.sk-shapp-icon-info::after,
.sk-shapp-icon-info::before {
   content: "";
   display: inline-block;
   box-sizing: border-box;
   position: absolute;
   border-radius: 3px;
   width: 2px;
   background: currentColor;
   left: 7px;
}

.sk-shapp-icon-info::after {
   bottom: 2px;
   height: 8px;
}

.sk-shapp-icon-info::before {
   height: 2px;
   top: 2px;
}

.sk-shapp-form .button { cursor: pointer; }

.sk-shapp-initial > div {
   display: inline-block;
   border-radius: 6px;
}

.sk-shapp-title-loadinginfo {
   padding-top: 20px;
   font-size: 24px;
}

.sk-shapp-booknow-container {
  text-align: center;
}

.sk-shapp-form .sk-shapp-nav .button {
   -webkit-appearance: none;
   min-height: 36px;
   margin-left: 5px;
   font-size: 14px;
   line-height: 1.7em;
   text-transform: none;
   cursor: pointer;
   outline: none;

   border: solid 1px #35B291;
   border-radius: 10px;
   color: #35B291;
   height: 36px;
   padding: 0px 24px;
   font-weight: bold;
   font-size: 12px;
   margin-left: 8px;
}


.sk-shapp-form .sk-shapp-nav .button.contained {
   color: #fff;
   background-color: #35B291;
}

.sk-shapp-form .sk-shapp-step2 .sk-shapp-container-calendar {
   padding: 0;
}

.sk-shapp-form fieldset,
.sk-shapp-form legend {
   margin: 0;
   padding: 0;
   border: none;
}

.sk-shapp-form .sk-shapp-service {
   position: relative;
   min-height: 45px;
   padding: 7px 18px;
   z-index: 1;
   border-bottom: none;
}

.sk-shapp-service.selected:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: currentColor;
   opacity: 0.2;
   z-index: -1;
 }

.sk-shapp-service-heading {
   display: block;
}

.sk-shapp-service-heading .sk-shapp-nowrap,
.sk-shapp-service-heading .sk-shapp-nowrap  .sk-shapp-nowrap  {
   display: inline;
}

.sk-shapp-services .sk-shapp-nowrap .sk-shapp-service-title {
   font-size: 20px;
}

.sk-shapp-service-content {
   display: block;
   overflow:hidden;
}

.sk-shapp-service-price {
   float: right;
}

.sk-shapp-form .sk-shapp-step1 .sk-shapp-service-price {
   font-size: 15px;
   background: none;
}

.sk-shapp-form .table-businesshours {
   margin: 0 auto;
}

.sk-shapp-service-description {
   display: inline-block;
}

.sk-shapp-nowrap { white-space: nowrap; }

.sk-shapp-calendar {
   display: flex;
   padding: 20px 0;
   flex-wrap: nowrap;
   align-items: flex-start;
}

.sk-shapp-calendar-prev,
.sk-shapp-calendar-next {
   width: 22px;
   cursor: pointer;
}

.sk-shapp-calendar-prev {
   float: left;
}

.sk-shapp-calendar-next {
   float: right;
}

.sk-shapp-calendar-arrow {
   position: relative;
   border: solid #00abde;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 4px;
   border-radius: 2px;
   cursor: pointer;
}

.sk-shapp-calendar-arrow.prev {
   left: 8px;
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
}

.sk-shapp-calendar-arrow.next {
   left: -8px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

.sk-shapp-calendar-prev.disabled,
.sk-shapp-calendar-next.disabled {
   cursor: default;
   opacity: 0.5;
}

.sk-shapp-calendar-prev.disabled .sk-shapp-calendar-arrow,
.sk-shapp-calendar-next.disabled .sk-shapp-calendar-arrow {
   cursor: default;
}

.sk-shapp-datepicker {
   width: 45%;
}

.sk-shapp-timepicker {
   width: 55%;
   padding-left: 30px;
}

.sk-shapp-timepicker-hours {
   display: flex;
   margin-top: 10px;
   flex-wrap: wrap;
}

.sk-shapp-container-selectstaff {
   width: 30%;
   min-width: 250px;
   display: inline-block;
   margin-left: 14px;
}

.sk-shapp-timeslot-wrapper {
   position: relative;
   max-width: 125px;
   width: calc(100% /3);
   text-align: center;
   font-size: 14px;
   z-index: 1;
}

.sk-shapp-timeslot-wrapper:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index:-1;
   border-right: 1px solid;
   border-bottom: 1px solid;
   border-color: currentColor;
   opacity: 0.2;
}

.sk-shapp-timeslot-wrapper:nth-child(3n):before {
   border-right: none;
}

.sk-shapp-step-content .sk-shapp-timeslot-wrapper.disabled label {
   cursor: default;
   opacity: 0.5;
}

.sk-shapp-timeslot {
   display: block;
   height: 38px;
   line-height: 38px;
}

.sk-shapp-timeslot.selected,
.sk-shapp-datepicker-day.selected {
   background-color: #00abde;
   color:#fff;
}

.sk-shapp-timeslot.selected {
   width: calc(100% - 1px);
   height: calc(100% - 1px);
}



.sk-shapp-calendar table {
   width: 100%;
   margin-top: 5px;
   font-size: 12px;
   border-collapse: collapse;
   text-align: center;
}

.sk-shapp-calendar table thead  {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 12px;
}

.sk-shapp-calendar table tbody tr td {
   padding: 0;
}

.sk-shapp-calendar table tr th {
   padding: 5px;
   font-weight: normal;
}

.sk-shapp-datepicker-day  {
   border: 1px solid transparent;
   display: inline-block;
   width: 32px;
   height: 32px;
   margin: 1px;
   padding: 0;
   line-height: 32px;
   text-align: center;
   border-radius: 150px;
   cursor: pointer;
}

.sk-shapp-datepicker-day.disabled {
   opacity: 0.5;
   cursor: default;
}

.sk-shapp-datepicker-navigation {
   min-width: 260px;
   height: 32px;
   margin-bottom: 10px;
   line-height: 32px;
   text-align: center;
}

.sk-shapp-datepicker-navigation > p,
.sk-shapp-timepicker > p {
   font-size: 16px;
}

.sk-shapp-datepicker-modes {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
   border: 1px solid #edeeee;
   border-radius: 5px;
}

.sk-shapp-datepicker-modes > span {
   width: calc(100% / 3);
   height: 42px;
   text-align: center;
   line-height: 42px;
   font-size: 12px;
   border-right: 1px solid #edeeee;
   cursor: pointer;
}

.sk-shapp-datepicker-modes > span:last-child {
   border-right: none;
}

.sk-shapp-datepicker-modes > span.active {
   color: #00abde;
   cursor: default;
}

.sk-shapp-steps {
   margin-bottom: 3px;
}

.sk-shapp-step-footer {
   position: relative;
   padding: 0 2px;
   font-size: 14px;
   z-index: 1;
}

.sk-shapp-step-footer:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-top: solid 1px currentColor;
   opacity: 0.2;
   z-index:-1;
}

.sk-shapp-mesasges .sk-shapp-step-footer:before {
   border-top: 0;
}

.sk-shapp-step-header,
.sk-shapp-step-footer {
   height: 63px;
   line-height: 63px;
}

.sk-shapp-step-header {
   display: flex;
   justify-content: space-between;
}

.sk-shapp-timezone-details {
   padding-right: 2px;
   font-size: 13px;
}

.sk-shapp-step-footer .sk-shapp-nav {
   line-height: 63px;
}

.sk-shapp-step-header h1 {
   font-size: 20px;
   line-height: 63px;
}

.sk-shapp-nav {
   float: right;
}

.sk-shapp-cancel {
   cursor: pointer;
   color: #00abde;
   font-weight: bold;
}

.sk-shapp-cancel:hover {
   opacity: 0.5;
}

.sk-shapp-confirmation-summary-table {
   width: 100%;
   margin: 15px 0;
   border-collapse: collapse;
}

.sk-shapp-confirmation-summary-table td {
   padding: 5px 0;
}

.sk-shapp-confirmation-summary-table td:nth-child(2){
   min-width: 110px;
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase;
}

.sk-shapp-confirmation-summary-table-mobile tbody tr {
   border-bottom: solid 1px #edeeee;
}

.sk-shapp-confirmation-summary-table-mobile tbody tr td:first-child {
   height: 55px;
}

.sk-shapp-confirmation-summary-table-mobile tbody tr td:nth-child(2) p {
   font-size: 13px;
}

.sk-shapp-confirmation-summary-table-mobile tbody tr td:nth-child(2) span {
   font-weight: normal;
   text-transform: none;
}

.sk-shapp-mesasges .sk-shapp-title {
   margin: 15px 0 10px 0;
   font-size: 18px;
}

.sk-shapp-step1,
.sk-shapp-step2,
.sk-shapp-step3,
.sk-shapp-step4,
.sk-shapp-mesasges {
   max-width: 600px;
   margin: 0px auto;
   text-align: left;
}

.sk-shapp-step2,
.sk-shapp-step3 {
   max-width: 700px;
}

.sk-shapp-mesasges .sk-shapp-step-footer {
   margin-top: 20px;
   text-align: center;
}

.sk-shapp-mesasges .sk-shapp-step-footer .sk-shapp-nav {
   float: none;
}

.sk-shapp-confirm-form .content {
   display: flex;
}

.sk-shapp-confirm-form .content > div {
   width: 50%;
}

.sk-shapp-confirm-form .sk-shapp-field-comments {
   width: 100%;
   height: 182px;
   padding-top: 10px;
   resize: none;
}

.sk-shapp-confirm-form .sk-shapp-field-wrapper {
   margin-top: 10px;
}

.sk-shapp-confirm-form .sk-shapp-field-wrapper > label {
   display: block;
}

.sk-shapp-icon {
   -webkit-mask: url(/Apps/Appointments/Images/app-icons.svg) no-repeat;
   mask: url(/Apps/Appointments/Images/app-icons.svg) no-repeat;
   vertical-align: top;
   display: inline-block;
   width: 30px;
   height: 25px;
   border: none;
   cursor: pointer;
   visibility: visible;
   background-color: currentColor;
   -webkit-mask-size: 42px;
   mask-size: 42px;
}

.sk-shapp-icon.sk-shapp-icon-service {
   -webkit-mask-position: -5px -7px;
   mask-position: -5px -7px;
}

.sk-shapp-icon.sk-shapp-icon-time {
   -webkit-mask-position: -5px -108px;
   mask-position: -5px -108px;
}

.sk-shapp-icon.sk-shapp-icon-staff {
   -webkit-mask-position: -5px -74px;
   mask-position: -5px -74px;
}

.sk-shapp-icon.sk-shapp-icon-price {
   -webkit-mask-position: -5px -41px;
   mask-position: -5px -41px;
}

.sk-shapp-icon.sk-shapp-icon-globe {
   width: 25px;
   height: 20px;
   margin-top: 20px;
   margin-right: 8px;
   -webkit-mask-position: -5px -125px;
   mask-position: -5px -125px;
   -webkit-mask-size: 36px;
   mask-size: 36px;
}

.sk-shapp-step-content .loading-message {
   padding: 15px 0 15px 24px;
}

.sk-shapp-step-content .sk-errormessage {
   width: 100%;
   font-size: 13px;
   color: #f00;
   line-height: 24px;
}

/*--- Responsive Styles ------------------------------------------------------*/

/*
   when available width (or when appointment app is inside the element with width) less than min required to display apply mobile styles
*/
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-calendar,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-confirm-form .content {
   flex-wrap: wrap;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-datepicker {
   margin-bottom: 20px;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-datepicker,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-timepicker {
  width: 100%;
  padding: 0 20px;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-timepicker-hours {
   max-width: calc(125px * 3);
   margin: 0 auto;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-service:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border-bottom: solid 1px currentColor;
   opacity: 0.2;
   z-index:-1;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-service:last-child:before {
   border-bottom: none;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-field-name,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-field-email,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-label-phone,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-field-comments,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-confirm-form .content > div  {
   width: 100%;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-datepicker,
.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-timepicker {
   padding: 0;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-step-header {
   display: block;
   height: auto;
   line-height: initial;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-icon.sk-shapp-icon-globe {
   margin-top: -2px;
}

.sk-shapp-form-mobile.sk-shapp-form .sk-shapp-step-footer {
   height: auto;
}

@media screen and (max-width: 420px) {
   .sk-shapp-step-footer.sk-shapp-step-footer-cancelable .sk-shapp-nav {
      float: none;
      text-align: center;
   }

   .sk-shapp-step-footer.sk-shapp-step-footer-cancelable .sk-shapp-cancel {
      width: 100%;
      display: inline-block;
      text-align: center;
   }
}

@media screen and (max-width: 360px) {
   .sk-shapp-step-footer .sk-shapp-nav {
      float: none;
      text-align: center;
   }

   .sk-shapp-step-footer .sk-shapp-cancel {
      width: 100%;
      display: inline-block;
      text-align: center;
   }
}

/* Appointment manager styles */

.sk-modal-inner-container.sk-app-scheduler-modal-container {
   position: relative;
   width: 75vw;
   max-width: 1200px;
}

.sk-app-scheduler-modal-content {
   padding: 0 !important;
}

.sk-app-scheduler-manager {
   background:  #fff;
   color: #444444;
}

.sk-app-scheduler-appointment-details .heading,
.sk-app-scheduler-manager .heading {
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 60px;
   padding: 0 25px;
   line-height: 60px;
   border-bottom: solid 1px #ccc;
   box-sizing: border-box;
   font-weight: bold;
}

.sk-app-scheduler-appointment-details .heading,
.sk-app-scheduler-manager .heading > p {
   font-size: 15px;
}

.sk-app-scheduler-appointment-details .heading {
   align-items: center;
}

.sk-app-scheduler-manager .heading .icon-close {
   display: inline-block;
   position: relative;
   top: 20px;
   width: 25px;
   height: 25px;
   background-image: url(/Shared/UIComponents/React/Modal/Images/close_icon.svg);
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: 2px 2px;
   cursor: pointer;
}

.sk-app-scheduler-manager .aside-content {
   display: flex;
   justify-content: center;
   min-width: 225px;
   box-sizing: border-box;
   border-right: solid 1px #ccc;
   padding-top: 1.5rem;
}

.sk-app-scheduler-manager .content {
   display: flex;
}

.sk-app-scheduler-manager .filter {
  width: 155px;
  padding: 20px 0;
}

.sk-app-scheduler-manager .filter span {
   text-transform: uppercase;
   color: #029aed;
   font-weight: bold;
}

.sk-app-scheduler-manager .filter ul {
   display: block;
   margin: 0;
   padding: 5px 0 0 0;
   list-style-type: none;
}

.sk-app-scheduler-manager .filter li {
   display: block;
   margin: 0;
   padding: 5px 0px;
}

.sk-app-scheduler-manager .filter li input {
   margin-left: 5px;
}

.sk-app-scheduler-manager .filter li label {
   display: inline-block;
   width: 110px;
   padding-left: 10px;
   box-sizing: border-box;
}

.sk-app-scheduler-manager .filter li:before {
   content: '';
   display: inline-block;
   width: 14px;
   height: 14px;
   margin-right: 5px;
   border-radius: 7px;
   background-color: red;
}

.sk-app-scheduler-manager .sk-select-wrapper  {
   width: 150px;
}

.sk-app-scheduler-manager .appointment .status-color.completed,
.sk-app-scheduler-manager .filter li.completed:before {
   background-color: #92cce6;
}

.sk-app-scheduler-manager .appointment .status-color.approved,
.sk-app-scheduler-manager .filter li.approved:before {
   background-color: #ff9c00;
}

.sk-app-scheduler-manager .appointment .status-color.waiting-approval,
.sk-app-scheduler-manager .filter li.waiting-approval:before {
   background-color: #40a65c;
}

.sk-app-scheduler-manager .appointment .status-color.rejected,
.sk-app-scheduler-manager .filter li.rejected:before {
   background-color: #e04839;
}

.sk-app-scheduler-manager .appointment {
   width: 100%;
   min-height: 470px;
   padding-right: 20px;
   padding-bottom: 10px;
}

.sk-app-scheduler-manager .appointment .appointments {
   height: 400px;
   padding-left: 20px;
   overflow: auto;
}
.sk-app-scheduler-manager .appointment table {
   width: 100%;
   font-size: 15px;
   border-collapse: collapse;
}

.sk-app-scheduler-manager .appointment table tr td:nth-child(2){
   width: 160px;
}

.sk-app-scheduler-manager .appointment .status-color {
  display: inline-block;
  position: relative;
  top: 3px;
  width: 8px;
  height: 48px;
}

.sk-app-scheduler-manager .appointment table tr {
  height: 48px;
}

.sk-app-scheduler-manager .appointment table tr td {
   border-bottom: solid 1px #ccc;
}

.sk-app-scheduler-manager .appointment table tr td:first-child {
   width: 35px;
   border-bottom: none;
}


.sk-app-scheduler-manager .appointment .icon-accept {
   display: inline-block;
   width: 22px;
   height: 15px;
   background-image: none;
   background-color: black;
   -webkit-mask: url(/Shared/Images/buttons.svg) no-repeat;
   mask: url(/Shared/Images/buttons.svg) no-repeat;
   -webkit-mask-size: 35px;
   mask-size: 35px;
   -webkit-mask-position: -7px -919px;
   mask-position: -7px -919px;
   cursor: pointer;
}


.sk-app-scheduler-manager .modes {
   height: 52px;
   margin-bottom: 15px;
   border-bottom: solid 1px #cdcdcd;
}

.sk-app-scheduler-manager .modes ul {
   display: inline-block;
   margin: 0;
   list-style: none;
}

.sk-app-scheduler-manager .modes ul li {
   float: left;
}

.sk-app-scheduler-manager .modes ul li span {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100px;
   height: 50px;
   padding: 0 10px;
   line-height: 1.2em;
   text-align: center;
   text-transform: uppercase;
   font-size: 15px;
   cursor: pointer;
}

.sk-app-scheduler-manager .modes ul li span.active {
   border-bottom: solid 3px #00abde;;
   color: #00abde;
   cursor: default;
}

.sk-app-scheduler-manager .cal-events-holder {
   position: absolute;
   top: 0;
   left: 10px;
   width: calc(100% - 10px);
}

.sk-app-scheduler-manager .cal-current-time {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 0;
   border-bottom: 1px solid red;
}

.sk-app-scheduler-manager .cal-current-time:before {
   content: '';
   position: relative;
   top: -5px;
   left: -10px;
   display: block;
   width: 10px;
   height: 10px;
   background-color: red;
   border-radius: 5px;
}

.sk-app-scheduler-manager .cal-event {
   position: absolute;
   display: none;
   padding-left: 5px;
   line-height: 17px;
   font-size: 14px;
   overflow: hidden;
   border-top: 1px solid #fff;
   box-sizing: border-box;
   cursor: pointer;
}

.sk-app-scheduler-manager .cal-event p {
   padding-top: 2px;
   font-size: 13px;
}

.sk-app-scheduler-manager .status-completed {
   background-color: #d5ebf6;
}

.sk-app-scheduler-manager .cal-event.status-completed {
   border-left: 5px solid #92cce6;
}

.sk-app-scheduler-manager .status-approved {
   background-color: #ffebcc;
}

.sk-app-scheduler-manager .cal-event.status-approved {
   border-left: 5px solid #ff9c00;
}

.sk-app-scheduler-manager .status-waiting-approval {
   background-color: #daf1e0;
}

.sk-app-scheduler-manager .cal-event.status-waiting-approval {
   border-left: 5px solid #40a65c;
}

.sk-app-scheduler-manager .status-rejected {
   background-color: #f8d6d3;
}

.sk-app-scheduler-manager .cal-event.status-rejected {
   border-left: 5px solid #e04839;
}

.sk-app-scheduler-manager .cal-event.status-completed,
.sk-app-scheduler-manager .cal-event.status-approved,
.sk-app-scheduler-manager .cal-event.status-waiting-approval,
.sk-app-scheduler-manager .cal-event.status-rejected {
   display: block;
}

.sk-app-scheduler-manager .arrow-prev,
.sk-app-scheduler-manager .arrow-next {
   width: 22px;
   padding: 0 20px;
   cursor: pointer;
}
.sk-app-scheduler-manager .arrow-prev i,
.sk-app-scheduler-manager .arrow-next i {
   position: relative;
   display: inline-block;
   padding: 4px;
   border: solid #000;
   border-width: 0 2px 2px 0;
   border-radius: 2px;
   cursor: pointer;
}

.sk-app-scheduler-manager .arrow-prev i {
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
}

.sk-app-scheduler-manager .arrow-next i{
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

.sk-app-scheduler-manager .icon-button.icon-small {
   margin: 0;
   background-size: 27px;
}

.sk-app-scheduler-manager .icon-button.icon-small.icon-edit {
   background-position: -4px -500px;
   padding-right: 6px;
}

.sk-app-scheduler-manager .icon-button.icon-small.icon-delete {
   background-position: -6px -178px;
}

.sk-app-scheduler-manager .icon-button.icon-small {
   width: 15px;
   height: 15px;
   margin: 1px;
}

.sk-app-scheduler-manager .calendar-header {
   display: flex;
   flex-wrap: nowrap;
   padding-left: 5px;
}

.sk-app-scheduler-manager .calendar-header > div {
   height: 30px;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.sk-app-scheduler-manager .cal-hours-wrapper {
   display: flex;
   justify-content: center;
}

.sk-app-scheduler-manager .cal-hours {
   width: 50px;
   height: 350px;
   padding-top: 26px;
}

.sk-app-scheduler-manager .cal-scale-wrapper {
   width: 683px;
   overflow: auto;
}

.sk-app-scheduler-manager .cal-scale {
   min-width: 683px;
}

.sk-app-scheduler-manager .cal-hours .cal-hour {
   height: 40px;
   text-align: center;
   text-transform: lowercase;
}

.sk-app-scheduler-manager .scale-wrapper {
   position: relative;
}

.sk-app-scheduler-manager .scale {
   margin: 10px 0 0;
   padding: 0;
   padding-left: 5px;
}

.sk-app-scheduler-manager .scale li {
   height: 19px;
   list-style: none;
   border-top: 1px solid #dddedd;;
}

.sk-app-scheduler-manager .scale li:nth-child(even){
   opacity: 0.5;
}

/* add/edit appointment styles */

.sk-app-scheduler-appointment-details {
   background-color: #fff;
   color: #000;
}

.sk-app-scheduler-appointment-details .heading p {
   display: inline-block;
}

.sk-app-scheduler-appointment-details .icon-back {
   display: inline-block;
   position: relative;
   top: 5px;
   width: 16px;
   height: 19px;
   margin-right: 20px;
   padding-left: 8px;
   background: transparent url(/Shared/UIComponents/Internal/RTE/Images/buttons.svg) no-repeat;
   background-position: center -1878px;
   background-size: 42px;
   cursor: pointer;
}


.sk-app-scheduler-appointment-details .content {
   display: flex;
   height: 480px;
}

.sk-app-scheduler-appointment-details .content > div {
   width: 50%;
   padding: 40px 0 0 40px;
}

.sk-app-scheduler-appointment-details .content > div p {
   font-weight: bold;
   font-size: 15px;
   padding-bottom: 40px;
}

.sk-app-scheduler-appointment-details .form-group {
   display: flex;
   padding-bottom: 10px;
   line-height: 35px;
}

.sk-app-scheduler-appointment-details .form-group .label {
   width: 110px;
}

.sk-app-scheduler-appointment-details .form-group .separetor {
   display: inline-block;
   width: 20px;
   text-align: center;
}

.sk-app-scheduler-appointment-details .form-group input[type="text"],
.sk-app-scheduler-appointment-details .form-group input[type="number"],
.sk-app-scheduler-appointment-details .form-group textarea,
.sk-app-scheduler-appointment-details .form-group .sk-select-wrapper {
   width: 300px;
}

.sk-app-scheduler-appointment-details .form-group .sk-input-field-wrapper,
.sk-app-scheduler-appointment-details .form-group .sk-select-wrapper {
   margin: 0;
}

.sk-app-scheduler-appointment-details .sk-errormessage {
   width: 100%;
   font-size: 13px;
   color: #f00;
   line-height: 24px;
}

.sk-app-scheduler-appointment-details .form-group .sk-select-wrapper.time-select {
   width: 140px;
}

/* Mobile Styles */

.mobile-panel .sk-app-scheduler-appointment-details .content,
.mobile-panel .sk-app-scheduler-appointment-details .form-group {
   display: block;
}

.mobile-panel .sk-app-scheduler-appointment-details .content {
   height: auto;
}

.mobile-panel .sk-app-scheduler-appointment-details .content > div {
   width: 100%;
   padding: 0;
}

.mobile-panel .sk-app-scheduler-appointment-details .content > div p {
   padding-bottom: 0;
}

.mobile-panel .sk-app-scheduler-appointment-details .form-group input[type="text"],
.mobile-panel .sk-app-scheduler-appointment-details .form-group input[type="number"],
.mobile-panel .sk-app-scheduler-appointment-details .form-group textarea,
.mobile-panel .sk-app-scheduler-appointment-details .form-group .sk-select-wrapper {
   width: 100%;
}

.mobile-panel .sk-app-scheduler-appointment-details .form-group .sk-select-wrapper.time-select {
   display: inline-block;
   width: calc(50% - 11px); /* 11px for the hyphen between two dropdowns */
}

.mobile-panel .sk-app-scheduler-appointment-details .content > .footer-container {
   display: flex;
   justify-content: space-between;
   height: 34px;
   line-height: 34px;
   margin-top: 15px;
   margin-bottom: 40px;
}



.icon-button {
   display: inline-block;
   background-image: url('/Shared/Scripts/ReactComponents/Images/sprite.svg');
}

.icon-button.icon-clickable {
   cursor: pointer;
}

/* SMALL */

.icon-button.icon-small {
   width: 15px;
   height: 15px;
   /*margin: 1px;*/

   background-size: 21px;
}

.icon-button.icon-small.icon-edit {
   background-position: -3px -118px;
}

.icon-button.icon-small.icon-delete {
   background-position: -3px -137px;
}

/* LARGE */

.icon-button.icon-large {
   width: 40px;
   height: 40px;

   background-size: 40px;
}

.icon-button.icon-large.icon-edit {
   background-position: 2px -164px;
}

.icon-button.icon-large.icon-delete {
   background-position: 2px -164px;
}

.sk-tooltips {
   display: none;
   position: absolute;
   top: -9999px;
   z-index: 9010;
   max-width: 210px;
   padding: 8px 12px;
   box-sizing: border-box;
   opacity: 0;
   background-color: #444;
   border-radius: 3px;
}

.sk-tooltips.sk-tooltips-link {
   max-width: 250px;
}

.sk-tooltips p {
   margin: 0;
   font: 9pt "Lato2", Verdana, sans-serif;
   color: #fff;
}

.sk-tooltips.sk-tooltips-link p {
   display: flex;
}

.sk-tooltips.sk-tooltips-link p span {
   white-space: pre;
}

.sk-tooltips p a {
   color: #F90;
}

.sk-tooltips.sk-tooltips-link p a {
   overflow: hidden;
   text-overflow: ellipsis;
}

.sk-tooltips.right {
   margin-right: 10px;
}

.sk-tooltips.left {
   margin-left: 10px;
}

.sk-tooltips.bottom {
   margin-top: 5px;
}

.sk-tooltips.top {
   margin-top: -5px;
}

.sk-tooltips .sk-tooltips-tail {
   position: absolute;
   width: 0;
   height: 0;
   content: '';
}

.sk-tooltips.right .sk-tooltips-tail {
   left: 100%;
   top: 50%;
   margin-top: -5px;
   border-left: 5px solid #444;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
}

.sk-tooltips.left .sk-tooltips-tail {
   right: 100%;
   top: 50%;
   margin-top: -5px;
   border-right: 5px solid #444;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
}

.sk-tooltips.bottom .sk-tooltips-tail {
   bottom: 100%;
   left: 50%;
   margin-left: -5px;
   border-bottom: 5px solid #444;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
}

.sk-tooltips.top .sk-tooltips-tail {
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-top: 5px solid #444;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
}

.sk-select-wrapper {
   display: flex;
   flex-direction: column;
   margin: 10px 0;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.sk-select-label {
   font-size: 12px;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: #222;
   margin-bottom: 5px;
}

.sk-select-options-wrapper {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 30px;
   padding: 0 6px;
   border-radius: 6px;
   border: 1px solid #DDDDDD;
   background-color: #FAFAFA;
   font-size: 14px;
   cursor: pointer;
}

.sk-select-options-wrapper:hover {
   background-color: #F2F2F2;
}

.sk-select-options-wrapper.active {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   border: 1px solid #00ABDE;
   background-color: #FFFFFF;
}

.sk-selected-option-title {
   max-width: 80%;
   color: #444;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.sk-selected-option-arrow {
   width: 20px;
   height: 20px;
   background-image: url(/Shared/UIComponents/React/Select/Images/expand_more_icon.svg);
   background-size: contain;
   background-repeat: no-repeat;
}

.sk-selected-option-arrow.active {
   background-image: url(/Shared/UIComponents/React/Select/Images/expand_less_icon.svg);
}

.sk-selected-cover {
   position: fixed;
   inset: 0;
   z-index: 1;
   cursor: default;
}

.sk-select-options {
   display: none;
   position: absolute;
   top: 31px;
   width: 100%;
   max-height: 140px;
   font-size: 14px;
   left: -1px;
   text-align: left;
   background-color: #fff;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-left: 1px solid #DDDDDD;
   border-right: 1px solid #DDDDDD;
   border-bottom: 1px solid #DDDDDD;
   z-index: 2;
   overflow: auto;
}

.sk-select-options.active {
   display: block;
}

.sk-select-option {
   height: 32px;
   padding: 0 6px;
   line-height: 32px;
   cursor: pointer;
}

.sk-select-option:not(:last-child) {
   border-radius: 0px;
}

.sk-select-option.selected {
   background-color: #F2F2F2;
}

.sk-select-option:not(.selected):hover {
   background-color: #FAFAFA;
}

.sk-select-option-label {
   max-width: 80%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #444;
}

.sk-select-hint {
   margin-top: 3px;
   font-size: 10px;
   color: #777;
   white-space: pre-line;
}

.sk-select-option.disabled {
   opacity: 0.5;
   cursor: default;
   background-color: #fff;
}
body:has(.sk-popup-outer-container) {
    overflow: hidden;
}

.sk-popup-outer-container {
    position: fixed;
    inset: 0;
    z-index: 10003; /* Same as modal z-index */
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
}

.sk-popup-container {
    position: absolute;
    max-width: 30vw;
}

.sk-popup-container-full-width {
   max-width: unset;
}

.sk-popup-container.sk-popup-no-background-blur {
    position: fixed;
    z-index: 10003; /* Same as modal z-index */
    opacity: 0;
}

.sk-popup-container.sk-popup-hidden {
    display: none;
}

.sk-popup-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #fff;
    z-index: 10001;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.sk-popup-container:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.sk-popup-inner-container {
    position: relative;
    width: 100%;
    z-index: 10002;
}

.sk-popup-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: fit-content;
    padding: 15px;
    border-radius: 4px;
    background: #fff;
    font-family: Lato2, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #000000;
}

.sk-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: #121212;
}

.sk-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-image: url(/Shared/UIComponents/React/Popup/Images/close_icon.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 0px 0px;
    cursor: pointer;
}

.sk-popup-footer-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-top: 10px;
}

.sk-popup-steps-text {
    display: flex;
    flex-shrink: 1;
    align-items: center;
    font-size: 12px;
    color: rgba(68, 68, 68, 0.7);
}

.sk-popup-buttons-container {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 10px;
}

.sk-popup-fade-out {
    -webkit-animation: sk-popup-fade-out-animation 0.1s linear forwards;
    animation: sk-popup-fade-out-animation 0.1s linear forwards;
}

@-webkit-keyframes sk-popup-fade-out-animation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

@keyframes sk-popup-fade-out-animation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

.sk-popup-fade-in {
    -webkit-animation: sk-popup-fade-in-animation 0.1s linear forwards;
    animation: sk-popup-fade-in-animation 0.1s linear forwards;
}

@-webkit-keyframes sk-popup-fade-in-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sk-popup-fade-in-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 600px) {    
   .sk-popup-container {
      max-width: 70vw;
   }

   .sk-popup-container.sk-popup-container-full-width {
      max-width: 100%;
   }
}
.sk-tooltip-container .sk-popup-content {
    padding: 7px 10px;
}
.sk-button {
   position: relative;
   border-radius: 6px;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   font-weight: normal;
   cursor: pointer;
}

.sk-button.small {
   height: 24px;
   min-height: 24px;
   padding: 0 10px;
   font-size: 12px;
}

.sk-button.medium {
   height: 32px;
   min-height: 32px;
   padding: 0 15px;
   font-size: 14px;
}

.sk-button.large {
   height: 40px;
   min-height: 40px;
   padding: 0 20px;
   font-size: 16px;
}

.sk-button.x-large {
   height: 48px;
   min-height: 48px;
   padding: 0 25px;
   font-size: 18px;
}

.sk-button.primary {
   background: #E37A00;
   border: 1px solid #E37A00;
   color: #fff;
}

.sk-button.primaryOutlined {
   background: transparent;
   border: 1px solid #E37A00;
   color: #E37A00;
}

.sk-button.primary:hover, .sk-button.primary:not(:disabled):active, .sk-button.primary:not(:disabled).active {
   background: #BA6400;
   border: 1px solid #BA6400;
   color: #fff;
}

.sk-button.primaryOutlined:hover, .sk-button.primaryOutlined:not(:disabled):active, .sk-button.primaryOutlined:not(:disabled).active {
   background: #E37A00;
   border: 1px solid #E37A00;
   color: #fff;
}

.sk-button.secondary {
   background: #35b291;
   border: 1px solid #35b291;
   color: #fff;
}

.sk-button.secondaryOutlined {
   background: transparent;
   border: 1px solid #35b291;
   color: #35b291;
}

.sk-button.secondary:hover, .sk-button.secondary:not(:disabled):active, .sk-button.secondary:not(:disabled).active {
   background: #28896F;
   border: 1px solid #28896F;
   color: #fff;
}

.sk-button.secondaryOutlined:hover, .sk-button.secondaryOutlined:not(:disabled):active, .sk-button.secondaryOutlined:not(:disabled).active {
   background: #35b291;
   border: 1px solid #35b291;
   color: #fff;
}

.sk-button.base {
   background: #00abde;
   border: 1px solid #00abde;
   color: #fff;
}

.sk-button.baseOutlined {
   background: transparent;
   border: 1px solid #00abde;
   color: #00abde;
}

.sk-button.base:hover, .sk-button.base:not(:disabled):active, .sk-button.base:not(:disabled).active {
   background: #007BA0;
   border: 1px solid #007BA0;
   color: #fff;
}

.sk-button.baseOutlined:hover, .sk-button.baseOutlined:not(:disabled):active, .sk-button.baseOutlined:not(:disabled).active {
   background: #00abde;
   border: 1px solid #00abde;
   color: #fff;
}

.sk-button.alert {
   background: #D50101;
   border: 1px solid #D50101;
   color: #fff;
}

.sk-button.alert:hover, .sk-button.alert:not(:disabled):active, .sk-button.alert:not(:disabled).active {
   background: #A80000;
   border: 1px solid #A80000;
   color: #fff;
}

.sk-button.text {
   background: transparent;
   color: #00abde;
   border: none;
}

.sk-button.text:hover, .sk-button.text:not(:disabled):active, .sk-button.text:not(:disabled).active {
   color: #007BA0;
}

.sk-button.textSecondary {
   background: transparent;
   color: #35b291;
   border: none;
}

.sk-button.textSecondary:hover, .sk-button.textSecondary:not(:disabled):active, .sk-button.textSecondary:not(:disabled).active {
   color: #28896F;
}

.sk-button.primary:disabled,
.sk-button.secondary:disabled {
  border: 1px solid #E6E6E6;
  background-color: #E6E6E6;
  color: #B1B1B1;
  cursor: inherit;
}

.sk-button.base:disabled {
   border: 1px solid #E6E6E6;
   background-color: #E6E6E6;
   color: #B1B1B1;
   cursor: inherit;
 }

.sk-button.primaryOutlined:disabled,
.sk-button.secondaryOutlined:disabled {
  border: 1px solid #D5D5D5;
  background-color: transparent;
  color: #B1B1B1;
  cursor: inherit;
}

.sk-button.baseOutlined:disabled {
  border: 1px solid #D5D5D5;
  background-color: transparent;
  color: #B1B1B1;
  cursor: inherit;
}

.sk-button.text:disabled,
.sk-button.textSecondary:disabled {
  color: #B1B1B1;
  cursor: inherit;
}

.sk-button:focus {
   outline: none;
   box-shadow: none;
 }

.sk-button.loading {
   background: #fff !important;
   color: #fff !important;
}

.sk-button.primary.loading,
.sk-button.primaryOutlined.loading {
   border: 1px solid #E37A00;
}

.sk-button.secondary.loading,
.sk-button.secondaryOutlined.loading {
   border: 1px solid #35b291;
}

.sk-button.base.loading,
.sk-button.text.loading {
   border: 1px solid #00abde;
}

.sk-button.textSecondary.loading {
   border: 1px solid #35b291;
}

.sk-button.baseOutlined.loading {
   border: 1px solid #00abde;
}

.sk-button.alert.loading {
   border: 1px solid #D50101;
}

.sk-button.loading::after {
   content: "";
   position: absolute;
   width: 12px;
   height: 12px;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   border: 2px solid transparent;
   border-radius: 50%;
   animation: button-loading-spinner 1s ease infinite;
}

.sk-button.primary.loading::after,
.sk-button.primaryOutlined.loading::after {
   border-top-color: #E37A00;
}

.sk-button.secondary.loading::after,
.sk-button.secondaryOutlined.loading::after {
   border-top-color: #35b291;
}

.sk-button.base.loading::after,
.sk-button.baseOutlined.loading::after,
.sk-button.text.loading::after {
   border-top-color: #00abde;
}

.sk-button.textSecondary.loading::after {
   border-top-color: #35b291;
}

.sk-button.alert.loading::after {
   border-top-color: #D50101;
}

@keyframes button-loading-spinner {
   from {
       transform: rotate(0turn);
   }

   to {
       transform: rotate(1turn);
   }
}
.sk-section-selector-wrapper {
   display: flex;
   position: relative;
}

.sk-section-selector-select-text {
   font-size: 13px;
   color: white;
}

.sk-section-selector-select-title {
   display: inline-block;
   max-width: 85px;
   padding-left: 4px;
   font-size: 13px;
   color: #00abde;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
}

.sk-section-selector-select-title-arrow {
   width: 15px;
   height: 15px;
   display: inline-block;
   background: url(/Shared/Images/AdminArea/new-opb-sprite.svg) no-repeat transparent -14px -1747px;
   cursor: pointer;
}

.sk-section-selector-select-option-wrapper {
   display: none;
}

.sk-section-selector-select-option-wrapper.active {
   display: block;
   position: absolute;
   top: 20px;
   right: 0;
   text-align: left;
   z-index: 2;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   font-size: 12px;
   background-color: #fefffe;
   border-radius: 6px;
   color: #3a3a3a;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   border: 1px solid rgba(221, 221, 221, 1);
   overflow: hidden;
}

.sk-section-selector-selectable-option {
   padding: 10px 13px;
   color: #00abde;
   font-size: 13px;
   line-height: normal;
   font-weight: bold;
   cursor: pointer;
   white-space: nowrap;
}

.sk-section-selector-selectable-option:not(:last-child) {
   border-bottom: 1px solid rgba(221, 221, 221, 0.6);
   border-radius: 0px;
}

.sk-section-selector-selectable-option.selected {
   background-color: #eff6f6;
}

.sk-section-selector-selectable-option:not(.selected):hover {
   background-color: #fafcfc;
}

.sk-button-with-dropdown-container {
   display: flex;
   height: fit-content;
}

.sk-button-with-dropdown-btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.sk-button-with-dropdown-divider {
   position: relative;
   width: 1px;
}

.sk-button-with-dropdown-divider.primary,
.sk-button-with-dropdown-divider.primaryOutlined {
   background-color: #E37A00;
}

.sk-button-with-dropdown-divider.secondary,
.sk-button-with-dropdown-divider.secondaryOutlined {
   background-color: #35b291;
}

.sk-button-with-dropdown-divider.base,
.sk-button-with-dropdown-divider.baseOutlined {
   background-color: #00abde;
}

.sk-button-with-dropdown-divider.alert {
   background-color: #D50101;
}

.sk-button-with-dropdown-divider.disabled  {
  background-color: #E6E6E6;
}

.sk-button-with-dropdown-divider:after {
   content: '';
   position: absolute;
   display: block;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(255,255,255,0.2);
}

.sk-button-with-dropdown-dropdown-btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.sk-button-with-dropdown-dropdown-btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.sk-button-with-dropdown-dropdown-btn.small {
   padding: 0 10px !important;
}

.sk-button-with-dropdown-dropdown-btn.medium {
   padding: 0 14px !important;
}

.sk-button-with-dropdown-dropdown-btn.large {
   padding: 0 18px !important;
}

.sk-button-with-dropdown-dropdown-btn.x-large {
   padding: 0 22px !important;
}

.sk-button-with-dropdown-dropdown-btn:after {
   content: '';
   position: absolute;
   display: block;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url('/Shared/Images/AdminArea/new-opb-sprite.svg');
   background-repeat: no-repeat;
}

.sk-button-with-dropdown-dropdown-btn.small:after {
   background-size: 36px;
   background-position: center -1521px;
}

.sk-button-with-dropdown-dropdown-btn.small.opened:after {
   background-position: center -1546px;
}

.sk-button-with-dropdown-dropdown-btn.medium:after {
   background-size: 40px;
   background-position: center -1687px;
}

.sk-button-with-dropdown-dropdown-btn.medium.opened:after {
   background-position: center -1715px;
}

.sk-button-with-dropdown-dropdown-btn.large:after {
   background-size: 44px;
   background-position: center -1854px;
}

.sk-button-with-dropdown-dropdown-btn.large.opened:after {
   background-position: center -1884px;
}

.sk-button-with-dropdown-dropdown-btn.x-large:after {
   background-size: 48px;
   background-position: center -2020px;
}

.sk-button-with-dropdown-dropdown-btn.x-large.opened:after {
   background-position: center -2053px;
}

.sk-button-with-dropdown-dropdown.small {
   top: 26px !important;
}

.sk-button-with-dropdown-dropdown.medium {
   top: 34px !important;
}

.sk-button-with-dropdown-dropdown.large {
   top: 42px !important;
}

.sk-button-with-dropdown-dropdown.x-large {
   top: 50px !important;
}
.sk-sip-wrapper {
   margin: 10px 0;
   user-select: none;
}

.sk-sip-label {
   font-size: 12px;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: #222;
   margin-bottom: 5px;
}

.sk-sip-selected-icon-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   height: 30px;
   color: #444;
   font-size: 12px;
}

.sk-sip-selected-icon {
   background-repeat: no-repeat;
   background-position: left;
   background-size: contain;
}

.sk-sip-none-icon {
   background-image: url('/Shared/UIComponents/React/StockIconPicker/Images/button-icon-none.png');
}

.sk-sip-image-caption {
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   font-size: 10px;
   line-height: 1em;
   margin-top: -.5em;
   text-transform: lowercase;
   text-align: center;
}

.sk-sip-image-wrapper {
   width: 100%;
   height: 210px;
   overflow-y: scroll;
   border: solid 1px #edeeee;
   border-radius: 4px;
}

.sk-sip-image {
   position: relative;
   display: inline-block;
   width: 47px;
   height: 47px;
   margin: 2px;
   padding: 2px;
   background-position: center;
   background-repeat: no-repeat;
   box-sizing: border-box;
   cursor: pointer;
}

.sk-sip-loading-container {
   text-align: center;
   vertical-align: middle;
   line-height: 130px;
}

.sk-sip-image:hover,
.sk-sip-image-selected,
.sk-sip-image-selected:hover {
   padding: 0;
   border: 2px solid #00abde;
}

.sk-sip-hint {
   margin-top: 3px;
   font-size: 10px;
   color: #777;
   white-space: pre-line;
}

.sk-sid-selector-wrapper .sk-select-option-label {
   max-width: 100%;
}

.sk-sid-selector-wrapper .sk-sid-selector-option {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.sk-sid-selector-wrapper .sk-selected-option-title {
   min-width: 140px;
}

.sk-modal-outer-container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Make modals z index start at 10003 to be above the right panel and context menu popups */
    z-index: 10003; /* From: web/Shared/Scripts/ReactComponents/Scripts/modal_dialog.mjs */
    pointer-events: none;
}

.sk-modal-outer-container.blurBackground {
    background: rgba(68,68,68, 0.4);
    cursor: default;
}

.sk-modal-outer-container.blockClicks {
    pointer-events: auto;
}

.sk-modal-inner-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(50% - 40px);
    max-width: 700px;
    max-height: calc(100% - 100px);
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0px 1px 4px #00000026;
    z-index: 10004; /* From: web/Shared/Scripts/ReactComponents/Scripts/modal_dialog.mjs */
    pointer-events: auto;
    overflow: hidden;
}

.sk-modal-inner-container.sk-modal-fullscreen {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: calc(100% - 40px) !important;
    max-height: none !important;
}

.sk-modal-title-container {
    display: flex;
    align-items: center;
    padding: 25px 32px 10px 32px;
    font-size: 24px;
    font-family: Lato2, Helvetica, Arial, sans-serif;
    color: #222222;
}

.sk-modal-back-btn {
    width: 25px;
    height: 21px;
    background-image: url(/Shared/Images/buttons.svg);
    background-position: -7px -184px;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-right: 10px;
 }

.sk-modal-content {
    display: flex;
    flex-direction: column;
    padding: 5px 32px;
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: Lato2,Helvetica,Arial,sans-serif;
    font-size: 14px;
    color: #444;
     /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    scroll-behavior: smooth;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
 .sk-modal-content::-webkit-scrollbar {
    display: none;
 }

.sk-modal-buttons-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 10px 32px 20px 0;
}

.sk-modal-header-buttons-container {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    top: 25px;
    right: 25px;
}

.sk-modal-header-button {
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    cursor: pointer;
}

.sk-modal-close-btn {
    background-image: url(/Shared/UIComponents/React/Modal/Images/close_icon.svg);
}

.sk-modal-fullscreen-btn.expand {
    background-image: url(/Shared/UIComponents/React/Modal/Images/expand_content.svg);
}

.sk-modal-fullscreen-btn.collapse {
    background-image: url(/Shared/UIComponents/React/Modal/Images/collapse_content.svg);
}

@media screen and (max-width: 1200px) {
    .sk-modal-inner-container{
       width: calc(60% - 40px);
    }
 }
 
@media screen and (max-width: 900px) {
    .sk-modal-inner-container {
        width: calc(70% - 40px);
    }
}

@media screen and (max-width: 600px) {    
    .sk-modal-inner-container {
        width: calc(100% - 40px);
    }

    .sk-modal-title-container {
        padding: 20px 32px 10px 32px;
        font-size: 18px;
    }

    .sk-modal-header-buttons-container {
        top: 15px;
        right: 15px;
    }
}

.sk-modal-hide {
    -webkit-animation: sk-modal-fadeout 0.15s linear forwards;
    animation: sk-modal-fadeout 0.15s linear forwards;
}

@-webkit-keyframes sk-modal-fadeout {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

@keyframes sk-modal-fadeout {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

.sk-modal-show {
    -webkit-animation: sk-modal-fadein 0.15s linear forwards;
    animation: sk-modal-fadein 0.15s linear forwards;
}

@-webkit-keyframes sk-modal-fadein {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sk-modal-fadein {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}
.sk-modal-content {
    min-height: 70px;
    white-space: pre-line;
}
.sk-input-field-wrapper {
   margin: 10px 0;
}

.sk-input-field-input {
   width: 100%;
   box-sizing: border-box;
   border-radius: 6px;
   border: 1px solid #DDDDDD;
   background: #FAFAFA;
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #444;
}

.sk-input-field-input::placeholder {
   color: #777;
}

.sk-input-field-input.small {
   height: 24px;
   font-size: 12px;
}

.sk-input-field-input.small,
.sk-input-field-input.small:focus:placeholder-shown {
   padding: 0 6px;
}

.sk-input-field-input.medium {
   height: 32px;
   font-size: 14px;
}

.sk-input-field-input.medium,
.sk-input-field-input.medium:focus:placeholder-shown {
   padding: 0 9px;
}

.sk-input-field-input.large {
   height: 40px;
   font-size: 16px;
}

.sk-input-field-input.large,
.sk-input-field-input.large:focus:placeholder-shown {
   padding: 0 12px;
}

.sk-input-field-input.x-large {
   height: 48px;
   font-size: 18px;
}

.sk-input-field-input.x-large,
.sk-input-field-input.x-large:focus:placeholder-shown {
   padding: 0 15px;
}

.sk-input-field-input:hover {
   background: #F2F2F2;
}

.sk-input-field-input:focus {
   background: #FFFFFF;
   border: 1px solid #00ABDE;
   outline: none;
   color: #444;
}

.sk-input-field-input:disabled {
   background: #E6E6E6;
   border: 1px solid #00000000;
   color: #909090;
}

.sk-input-field-input.error {
   border: 1px solid #D50101;
}

.sk-input-field-label {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: #222;
}

.sk-input-field-label.small,
.sk-input-field-label.medium {
   font-size: 12px;
   margin-bottom: 5px;
}

.sk-input-field-label.large {
   font-size: 14px;
   margin-bottom: 8px;
}

.sk-input-field-label.x-large {
   font-size: 16px;
   margin-bottom: 11px;
}

.sk-input-field-label-required-star {
   color:#d50101;
   white-space: pre;
}

.sk-input-field-error {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #D50101;
   white-space: pre-line;
}

.sk-input-field-error.small,
.sk-input-field-error.medium {
   font-size: 12px;
   margin-top: 5px;
}

.sk-input-field-error.large {
   font-size: 14px;
   margin-top: 8px;
}

.sk-input-field-error.x-large {
   font-size: 16px;
   margin-top: 11px;
}

.sk-input-field-input.range {
   -webkit-appearance: none;
   appearance: none;
   height: 8px; 
   min-height: 8px;
   background: #00abde;
   outline: none;
   margin: 0;
}

.sk-input-field-input.range:focus {
   outline: none;
}

.sk-input-field-input.range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 16px;
   border: 3px solid #00abde;
   cursor: pointer;
 }
 
 .sk-input-field-input.range::-moz-range-thumb {
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 16px;
   border: 3px solid #00abde;
   cursor: pointer;
 }

.sk-input-field-hint {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #777;
   white-space: pre-line;
}

.sk-input-field-hint.small,
.sk-input-field-hint.medium {
   font-size: 10px;
   margin-top: 3px;
}

.sk-input-field-hint.large {
   font-size: 12px;
   margin-top: 5px;
}

.sk-input-field-hint.x-large {
   font-size: 14px;
   margin-top: 8px;
}
.sk-input-with-units-wrapper {
   display: block;
   width: 100%;
   margin: 10px 0;
}

.sk-input-field-with-units {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: baseline;
}

.sk-input-field-with-units .sk-input-field-wrapper,
.sk-input-field-with-units .sk-select-wrapper {
   margin: 0;
}

.sk-input-field-with-units .sk-input-field-wrapper {
   flex-grow: 1;
}

.sk-input-field-with-units .sk-select-wrapper {
   max-width: 90px;
   flex: 1 1 75px;
}

.sk-input-field-with-units .sk-select-options-wrapper {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-color: transparent;
}

.sk-input-field-with-units .sk-select-options-wrapper.active {
   border-left-color: #00ABDE;
}


.sk-input-field-with-units .sk-input-field-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
.sk-validation-error-message {
   font-family: Lato2, Helvetica, Arial, sans-serif;
   color: #D50101;
   white-space: pre-line;
}

.sk-validation-error-message.small,
.sk-validation-error-message.medium {
   font-size: 12px;
}

.sk-validation-error-message.large {
   font-size: 14px;
   margin-top: 3px;
}

.sk-validation-error-message.x-large {
   font-size: 16px;
   margin-top: 6px;
}

.sk-validation-red-outline:focus,
.sk-validation-red-outline:not(:focus) {
   border: 1px solid #D50101;
}