
.showcasecontainer,
#customWindow
{
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: white;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* non-prefixed version, currently not supported by any browser */
}

.headercontainer
{
  width: 100%;
  height: 45px;
  background-color: #313443;
}

.headercontainertext
{
  padding-top: 0.8%;
  margin-left: 10px;
  color: #fff;
  font-family: "helvetica";
  font-size: 15px;
  cursor: default;
}

.contentcontainer
{
  width: 100%;
  height: 93%;
}

.leftcol,
.middlecol,
.rightcol
{
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.leftcol,
.rightcol
{
  width: 18%;
  height: 100%;
  border: 1px solid #E9E9E9;
}

.category
{
  width: 100%;
  height: 250px;
  padding-bottom: 10px;
}

.categoryheader,
.calendarheader
{
  width: 100%;
  height: 15%;
  padding: 10px 0px;
  border-bottom: 1px solid #E9E9E9;
}

.categorycontent
{
  width: 100%;
  height: 90%;
  overflow-y: scroll;
  padding-top: 2%;
}

.doctor
{
  width: 100%;
  height: 58%;
  padding-top: 10px;
}

.doctorheader
{
  width: 100%;
  height: 40px;
  padding: 10px 0px;
  border-bottom: 1px solid #E9E9E9;
  margin-bottom: 15px;
}

.doctorcontent
{
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}

.doctorsdept
{
  width: 100%;
  height: 72%;
  overflow-y: scroll;
}

.middlecol
{
  width: 64%;
  height: 100%;
  background-color: #f5f5f5;
}

.menubar
{
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

.menuheadertext
{
  color: #353535;
  font-family: "Segoe UI";
  font-size: 12px;
  cursor: default;
  height: 100%;
  overflow: hidden;
}

.display
{
  width: 31%;
  height: 50px;
  float: left;
  padding: 6px;
}

.displayright
{
  width: auto;
  height: 100%;
  float: right;
  padding: 0.7%;
}

.appointmentarea
{
  background-color: white;
  width: 100%;
  height: 89%;
  padding-bottom: 3px;
  border-radius: 5px;
}

.hospitalschedule
{
  width: 100%;
  height: 100%;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 15px;
}

.calendar
{
  width: 100%;
  height: 280px;
}

.calendarcontent
{
  width: 100%;
  height: 83%;
  margin-top: 10px;
  vertical-align: middle;
}

.waitinglist
{
  width: 100%;
  height: 51%;
}

.waitinglistheader
{
  width: 100%;
  height: 50px;
  padding: 5px;
}

.headertext
{
  color: #959595;
  font-family: "Segoe UI";
  font-size: 12px;
  cursor: default;
}

.waitinglistcontent
{
  width: 100%;
  height: 73%;
  border: 0.5px solid #E1E7EC;
  background-color: #F5F5F5;
  overflow-y: scroll;
}

.listbox,
.doctorslist,
.waitingapplist
{
  width: 100%;
  height: auto;
}

.waitingapplist
{
  padding: 2%;
}

.appointmentbtn
{
  width: 100%;
  height: 15%;
}

.epadding
{
  padding: 5px;
}

/* ---------------Scroller Customization--------------- */

::-webkit-scrollbar
{
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track
{ /* Track */
  -webkit-box-shadow: #fff;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb
{ /* Handle */
  -webkit-border-radius: 10px;
  border-radius: 5px;
  background: #D5D5D5;
}

/* ---------------Control Customization--------------- */
#wcontent
{
  width: 75px;
  height: 75px;
  border-radius: 5px;
  background: white;
  z-index: 10001;
}

.e-schedule .e-scheduleheader,
.e-schedule .e-commonviewbutton
{
  background: none;
  border: none;
}

.e-schedule .e-commonviewbutton.e-activeview
{
  color: #333;
  font-weight: bolder;
  opacity: 1 !important;
}

.e-schedule .e-commonviewbutton
{
  opacity: 0.5;
}

.e-schedule .e-scheduleheader td
{
  border: none;
}

.e-schedule .e-lastview,
.e-schedule .e-firstview
{
  border-radius: 0px;
}

.e-schedule .e-firstview
{
  border-right: 1px solid #c3c3c3;
}

.e-schedule .e-lastview
{
  border-left: 1px solid #c3c3c3;
}

.e-schedule .e-datedisplay
{
  color: #838485;
}

.e-schedule .e-recurapp,
.e-schedule .e-recureditapp
{
  position: absolute;
}

.e-schedule .e-schedulerepeat:before,
.e-schedule .e-recurapp:before
{
  font-size: 10px;
}

.e-schedule .e-ewexpand
{
  padding-top: 6px;
}

.e-togglebutton
{
  margin-top: -22px;
}

.e-tbtn.e-active
{
  background: none;
}

#doctorsdeptlist
{
  padding-right: 5px;
}

#doctorsdeptlist li
{
  border-bottom: 1px solid #E9E9E9;
  padding: 10px;
}
#datepicker {
  outline: none;
}
#datepicker.e-datepicker.e-calendar
{
  border: none;
  background-color: white;
}

#datepicker.e-datepicker .e-header
{
  background-color: white;
  border-bottom: none;
}

#datepicker.e-datepicker .e-active,
#datepicker.e-datepicker .today,
#datepicker.e-datepicker table td:hover,
#datepicker.e-datepicker td.e-state-hover,
#datepicker.e-datepicker .current-month.e-state-default.e-special-day:hover
{
  border-radius: 25px;
}

#datepicker.e-datepicker .e-week-header,
#datepicker.e-datepicker .e-week-header:hover
{
  background-color: white;
  color: #707171;
}

#datepicker.e-datepicker .e-datepicker-headertext,
#datepicker.e-datepicker .e-header .e-icon
{
  color: #707171;
}

#searchlist_dropdown,
#doctorlist_dropdown
{
  background: white;
  border: none;
}

.headtitle
{
  font-size: 10px;
  color: #959595;
  font-family: "Segoe UI";
  cursor: default;
}

.bottomline
{
  border-bottom: 3px solid #a289bf;
}

.searchbox
{
  border-radius: 5px;
}

.viewcolor
{
  font-weight: bolder;
  opacity: 1 !important;
}

.categoryname,
.doctorname
{
  font-family: "Segoe UI";
  font-size: 12px;
  color: #545554;
}

.categoryname
{
  width: 50%;
  height: 16px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

#upcomming_container
{
  background: #F5F5F5;
}

.designation
{
  font-family: "Segoe UI";
  font-size: 9px;
  color: #a4a4a4;
  padding-top: 3px;
}

.patientdetails
{
  width: 100%;
}

.hovercolor
{
  color: white !important;
}

.esearch
{
  display: inline-block;
  padding: 5px 1px 5px 1px;
  margin-top: -2px;
}

.groupbtn
{
  width: auto;
  height: 100%;
  padding: 5px 0px 5px 5px;
  float: right;
}

.btnsht
{
  padding: 5px;
  float: left;
}

.leftpanel
{
  position: absolute;
  z-index: 999;
  background: white;
  width: 250px !important;
}

.rightpanel
{
  position: absolute;
  z-index: 999;
  background: white;
  width: 250px !important;
  top: 45px;
  right: 0px;
}

.panelicon
{
  width: 25px;
  top: 32px;
  z-index: 1;
}

.temp
{
  font-family: "Segoe UI";
  font-size: 13px;
}

.temphead
{
  font-family: "Segoe UI";
  font-size: 13px;
  font-weight: bold;
}

.displayleft
{
  float: left;
  padding: 10px;
}

.searchdisplay
{
  width: auto;
  height: auto;
  float: right;
}

.error
{
  background: #FF8A8A !important;
}

#doctorlist_container
{
  border-color: #E9E9E9;
}

#patientWindow_title,
#customWindow_title,
#tokenWindow_title,
#alertWindow_title,
#deleteWindow_title,
#endsonlabel,
#yearlabel,
#monthlabel,
.e-textlabel,
.textlabel
{
  font-weight: bolder;
}

#patient table,
#custom table,
#delete table,
#token table
{
  cursor: default;
}

#patient table td,
#custom table td
{
  padding: 5px;
}

#recurrenceEditor .e-recurendslabel,
#recurrenceEditor .e-textmargin,
#recurrenceEditor .e-textlabel
{
  font-weight: normal;
}

#upcomming
{
  width: 100%;
  height: 100%;
  padding: 5px;
}

#doctorsdeptlist .designationstyle
{
  font-size: 12px;
  padding-top: 4px;
  right: 10px;
}

#doctorsdeptlist .templatetext
{
  font-size: 14px;
  font-weight: bolder;
  position: relative;
}

#searchDiv
{
  margin-right: 20px;
  margin-top: -4px;
  float: right;
}

#searchfilter
{
  padding: 5px;
}

.e-grid .e-rowcell
{
  padding: 0.7em !important;
}

#doctors
{
  height: 30px;
}

#dtrimage
{
  float: left;
  width: 20%;
  height: 100%;
  padding-left: 5px;
}

#dtrdetails
{
  float: left;
  width: 50%;
  height: 100%;
  padding-left: 5px;
}

#dtrcategory
{
  width: 10%;
  height: 100%;
  float: right;
  padding-top: 8px;
}

.doctorname,
.designation
{
  width: 100%;
  height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctorimg
{
  float: left;
  width: 30px;
  border-radius: 50%;
}

#waiting
{
  width: 100%;
  height: 100%;
}

#waiticon
{
  float: left;
  width: 3%;
  height: 100%;
  padding-top: 8px;
}

#waitid
{
  float: left;
  width: 13%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  font-family: "Segoe UI";
  color: #3277b2;
  overflow: hidden;
}

#waitdetails
{
  float: left;
  width: 65%;
  height: 100%;
  border-left: 1px solid #D2D3D4;
}

#waitlist
{
  width: 100%;
  height: 15px;
  font-weight: bold;
  font-family: "Segoe UI";
  font-size: 12px;
  color: #545554;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#waitcategory
{
  width: 100%;
  height: 15px;
  font-family: "Segoe UI";
  font-size: 10px;
  color: #545554;
  opacity: 0.6;
  padding-left: 10px;
  padding-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#waitcategoryicon
{
  float: right;
  width: 15%;
  height: 100%;
  padding-top: 7px;
  padding-left: 5px;
}

.waitinglistli
{
  padding: 5px;
  border: 0.5px solid #E1E7EC;
  margin-right: 10px;
  margin-bottom: 5px;
  height: 31px;
  background: white;
}

#waitinglisttooltip
{
  height: auto;
  width: auto;
  bottom: auto;
  right: auto;
  position: absolute;
  background: #fff;
  border: 1px solid #c3c3c3;
  display: block;
  z-index: 10018;
  max-width: 350px;
  min-width: 50px;
  visibility: visible;
  padding: 10px;
}

#appsubmit,
#appcancel,
#alertok,
#alertcancel,
#recsubmit,
#reccancel,
#patientsave,
#patientcancel,
#btnsubmit,
#btncancel
{
  float: right;
  margin-right: 20px;
  margin-bottom: 10px;
}

#lefticon
{
  width: 28px;
  height: 28px;
  color: white;
  background: #B5B5B5;
  margin-left: -10px;
  margin-top: 10px;
  position: absolute;
  z-index: 99999;
  border-radius: 0px 5px 5px 0px;
}

#righticon
{
  width: 28px;
  height: 28px;
  color: #fff;
  background: #B5B5B5;
  position: absolute;
  right: 0px;
  margin-top: 10px;
  z-index: 99999;
  border-radius: 5px 0px 0px 5px;
}

#searchbtn-wrapper
{
  margin-top: 20px;
  width: 40px;
  float: right;
}

#searchdata
{
  display: none;
  width: auto;
  height: 92%;
  float: right;
  margin-top: 2px;
}

#datesearchpanel
{
  display: none;
  background: #f5f5f5;
  position: absolute;
  z-index: 1;
  width: auto;
  padding: 0px 5px 0px 5px;
  height: 40px;
}

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

@font-face
{
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?k5kem1');
  src: url('fonts/icomoon.eot?k5kem1#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?k5kem1') format('truetype'), url('fonts/icomoon.woff?k5kem1') format('woff'), url('fonts/icomoon.svg?k5kem1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"]
{
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-style: 16px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: #BBBBBB;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-waiticon
{
  margin-left: -5px;
}

.icon-checkup,
.icon-consulting,
.icon-extraction,
.icon-observation,
.icon-surgery,
.icon-therapy
{
  font-size: 23px;
  color: white;
  opacity: 0.3;
}

.icon-cardiologist,
.icon-childspecialist,
.icon-dermatologist,
.icon-extraction,
.icon-hematologist,
.icon-neurologist,
.icon-oncologist,
.icon-ophthalmologist,
.icon-orthopedic,
.icon-urologist
{
  font-size: 20px;
}

.icon-close
{
  position: absolute;
  top: 7px;
  left: 4px;
  color: #686969;
}

.datesearch
{
  position: relative;
  top: 0px;
  left: 0px;
  color: #686969 !important;
}

.icon-searchclose:after
{
  content: "\e904";
  float: right;
  margin-top: -40px;
  cursor: pointer;
}

.icon-left,
.icon-right
{
  color: #fff;
  font-size: 20px;
  position: absolute;
  margin: 3px 0px 0px 3px;
  cursor: pointer;
}

.icon-cardiologist:before
{
  content: "\e900";
}

.icon-category:before
{
  content: "\e901";
}

.icon-checkup:before
{
  content: "\e902";
}

.icon-childspecialist:before
{
  content: "\e903";
}

.icon-close:before
{
  content: "\e904";
}

.icon-consulting:before
{
  content: "\e905";
}

.icon-dermatologist:before
{
  content: "\e906";
}

.icon-extraction:before
{
  content: "\e907";
}

.icon-hematologist:before
{
  content: "\e908";
}

.icon-left:before
{
  content: "\e909";
}

.icon-neurologist:before
{
  content: "\e90a";
}

.icon-observation:before
{
  content: "\e90b";
}

.icon-oncologist:before
{
  content: "\e90c";
}

.icon-ophthalmologist:before
{
  content: "\e90d";
}

.icon-orthopedic:before
{
  content: "\e90e";
}

.icon-perinatologist:before
{
  content: "\e90f";
}

.icon-right:before
{
  content: "\e910";
}

.icon-search:before
{
  content: "\e911";
}

.icon-surgery:before
{
  content: "\e912";
}

.icon-therapy:before
{
  content: "\e913";
}

.icon-urologist:before
{
  content: "\e914";
}

.icon-waiticon:before
{
  content: "\e915";
}

/*   ---------------MediaQuery--------------- */
@media (min-width : 100px) and (max-width : 320px)
{
  .leftcol,
  .rightcol
  {
    display: none;
  }

  .middlecol
  {
    width: 100%;
  }

  .displayright
  {
    margin-right: 15px;
    width: 260px !important;
  }

  .menubar
  {
    height: 50px;
  }

  .searchdisplay
  {
    width: 225px;
  }

  .display,
  .searchdatepicker
  {
    display: none;
  }

  .e-datewidget
  {
    width: 99px !important;
  }

  #searchdata
  {
    float: none;
  }

  #lefticon,
  #righticon
  {
    display: block;
  }

  #searchlist_wrapper
  {
    width: 70px !important;
  }

  #txtSearch_wrapper
  {
    width: 125px !important;
  }
}

@media (min-width : 320px) and (max-width : 480px)
{
  .leftcol,
  .rightcol
  {
    display: none;
  }

  .middlecol
  {
    width: 100%;
  }

  #search
  {
    float: right;
  }

  .displayright
  {
    margin-right: 15px;
    width: 314px;
  }

  .menubar
  {
    height: 50px;
  }

  .searchdisplay
  {
    width: 225px;
  }

  .display,
  .searchdatepicker
  {
    display: none;
  }

  .e-datewidget
  {
    width: 105px !important;
  }

  #searchdata
  {
    float: right;
  }

  #lefticon,
  #righticon
  {
    display: block;
  }

  #searchlist_wrapper
  {
    width: 70px !important;
  }

  #txtSearch_wrapper
  {
    width: 140px !important;
  }
}

@media (min-width : 481px) and (max-width : 767px)
{
  .leftcol,
  .rightcol
  {
    display: none;
  }

  .middlecol
  {
    width: 100%;
  }

  #search
  {
    float: right;
  }

  .displayright
  {
    margin-right: 15px;
    width: 314px;
  }

  .menubar
  {
    height: 50px;
  }

  .searchdisplay
  {
    width: 225px;
  }

  .display,
  .searchdatepicker
  {
    display: none;
  }

  #lefticon,
  #righticon
  {
    display: block;
  }

  #searchlist_wrapper
  {
    width: 100px !important;
  }

  #txtSearch_wrapper
  {
    width: 140px !important;
  }
}

@media (min-width : 768px) and (max-width : 1024px)
{
  .leftcol,
  .rightcol
  {
    display: block !important;
    width: 18%;
  }

  .middlecol
  {
    width: 64%;
  }

  #search
  {
    float: right;
  }

  .displayright
  {
    margin-right: 25px;
    width: 314px;
  }

  .menubar
  {
    height: 50px;
  }

  .searchdisplay
  {
    width: 225px;
  }

  .display,
  .searchdatepicker,
  #lefticon,
  #righticon
  {
    display: none;
  }

  #searchlist_wrapper
  {
    width: 100px !important;
  }

  #txtSearch_wrapper
  {
    width: 140px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1920px)
{
  .leftcol,
  .rightcol
  {
    display: block !important;
    width: 18%;
  }

  .middlecol
  {
    width: 64%;
  }

  #search
  {
    display: inline-block;
  }

  .display
  {
    display: block;
  }

  .displayright
  {
    margin-right: 0px;
    width: 314px;
  }

  .menubar
  {
    height: 50px;
  }

  .searchdisplay
  {
    width: auto;
  }

  .searchdatepicker,
  #lefticon,
  #righticon
  {
    display: none;
  }

  #searchlist_wrapper
  {
    width: 100px !important;
  }

  #txtSearch_wrapper
  {
    width: 140px !important;
  }
}

@media (min-width: 1920px)
{
  .leftcol,
  .rightcol
  {
    display: block !important;
    width: 18%;
  }

  .middlecol
  {
    width: 64%;
  }

  #search
  {
    display: inline-block;
  }

  .display
  {
    display: block;
  }

  .displayright
  {
    margin-right: 0px;
    width: 314px;
  }

  .menubar
  {
    height: 50px !important;
  }

  .searchdisplay
  {
    width: auto;
  }

  .searchdatepicker,
  #lefticon,
  #righticon
  {
    display: none;
  }

  #searchlist_wrapper
  {
    width: 100px !important;
  }

  #txtSearch_wrapper
  {
    width: 140px !important;
  }
}
