:root[data-theme="light"] {
  --text: #150047;
  --background: #ebe5f5;
  --primary: #3d2e60;
  --secondary: #ad8ac7;
  --accent: #894691;
}
:root[data-theme="dark"] {
  --text: #cdb8ff;
  --background: #100a1a;
  --primary: #ae9fd1;
  --secondary: #5c3875;
  --accent: #b26eb9;
}

:root[data-theme="light"] {
  --text-50: #ede5ff;
  --text-100: #dbccff;
  --text-200: #b899ff;
  --text-300: #9466ff;
  --text-400: #7033ff;
  --text-500: #4d00ff;
  --text-600: #3d00cc;
  --text-700: #2e0099;
  --text-800: #1f0066;
  --text-900: #0f0033;
  --text-950: #08001a;

  --background-50: #f1edf8;
  --background-100: #e3daf1;
  --background-200: #c6b6e2;
  --background-300: #aa91d4;
  --background-400: #8d6cc6;
  --background-500: #7147b8;
  --background-600: #5a3993;
  --background-700: #442b6e;
  --background-800: #2d1d49;
  --background-900: #170e25;
  --background-950: #0b0712;

  --primary-50: #f0eef7;
  --primary-100: #e2ddee;
  --primary-200: #c5bade;
  --primary-300: #a898cd;
  --primary-400: #8b75bd;
  --primary-500: #6e53ac;
  --primary-600: #58428a;
  --primary-700: #423267;
  --primary-800: #2c2145;
  --primary-900: #161122;
  --primary-950: #0b0811;

  --secondary-50: #f3eef7;
  --secondary-100: #e7ddee;
  --secondary-200: #cebade;
  --secondary-300: #b698cd;
  --secondary-400: #9e75bd;
  --secondary-500: #8553ac;
  --secondary-600: #6b428a;
  --secondary-700: #503267;
  --secondary-800: #352145;
  --secondary-900: #1b1122;
  --secondary-950: #0d0811;

  --accent-50: #f6eef7;
  --accent-100: #edddee;
  --accent-200: #dabade;
  --accent-300: #c898cd;
  --accent-400: #b675bd;
  --accent-500: #a353ac;
  --accent-600: #83428a;
  --accent-700: #623267;
  --accent-800: #412145;
  --accent-900: #211122;
  --accent-950: #100811;

}
:root[data-theme="dark"] {
  --text-50: #08001a;
  --text-100: #0f0033;
  --text-200: #1f0066;
  --text-300: #2e0099;
  --text-400: #3d00cc;
  --text-500: #4d00ff;
  --text-600: #7033ff;
  --text-700: #9466ff;
  --text-800: #b899ff;
  --text-900: #dbccff;
  --text-950: #ede5ff;

  --background-50: #0b0712;
  --background-100: #170e25;
  --background-200: #2e1d49;
  --background-300: #452b6e;
  --background-400: #5c3993;
  --background-500: #7247b8;
  --background-600: #8f6cc6;
  --background-700: #ab91d4;
  --background-800: #c7b6e2;
  --background-900: #e3daf1;
  --background-950: #f1edf8;

  --primary-50: #0b0811;
  --primary-100: #161122;
  --primary-200: #2c2145;
  --primary-300: #423267;
  --primary-400: #58428a;
  --primary-500: #6e53ac;
  --primary-600: #8b75bd;
  --primary-700: #a898cd;
  --primary-800: #c5bade;
  --primary-900: #e2ddee;
  --primary-950: #f0eef7;

  --secondary-50: #0d0811;
  --secondary-100: #1b1122;
  --secondary-200: #362145;
  --secondary-300: #513267;
  --secondary-400: #6c428a;
  --secondary-500: #8753ac;
  --secondary-600: #9f75bd;
  --secondary-700: #b798cd;
  --secondary-800: #cfbade;
  --secondary-900: #e7ddee;
  --secondary-950: #f3eef7;

  --accent-50: #100811;
  --accent-100: #211122;
  --accent-200: #412145;
  --accent-300: #623267;
  --accent-400: #83428a;
  --accent-500: #a353ac;
  --accent-600: #b675bd;
  --accent-700: #c898cd;
  --accent-800: #dabade;
  --accent-900: #edddee;
  --accent-950: #f6eef7;

  --lightGreenAccent: #4ff917;
  --darkGreenAccent: #259817;
  --redAccent: #e42431;
  --goldAccent: #d7c433;
}



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

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



.eagle-lake-regular {
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
}

.medievalsharp-regular {
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
}

.medievalsharp-heavy {
  font-family: "MedievalSharp", cursive;
  font-weight: 700;
  font-style: normal;
}

.merriweather-sans-light {
  font-family: "Merriweather Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.merriweather-sans-normal {
  font-family: "Merriweather Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Tablet styles (min-width: 769px and max-width: 1024px) */
@media only screen and (min-width: 10px) and (max-width: 400px) 
{
  .headerSiteName
  {
    display: none;
  }  
}

.headerElem 
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed !important;
  top: 0 !important;
  z-index: 3 !important;
  width: 100%;
  /*font-size: 3em;*/
  max-height: 65px;
  height: 65px;
  min-height: 65px !important;
  border-bottom: thin solid var(--accent);
  overflow: visible !important;
  padding-right: 15px;
}

.menuLogoBox
{
  display: flex;
  align-items: center;
  height: 100%; 
  margin-left:10px;
  
}

.signInBox
{
  display: flex;
  align-items: center;
  margin-right:10px;
}


.hamburger-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  font-size: 3.5em;
  margin-right: 15px;
  margin-left: 5px;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;     
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.3s;
}

.hamburger-icon:hover {
  
  transform: rotate(90deg);
}

.hamburger-icon:active {
  transform: rotate(90deg) scale(.75);
}

/*
.ui.flyout.menuBox, .ui.flyout > .headerElem, .ui.vertical.menu, .ui.flyout > .header, .ui.divider:not(.hidden), .ui.flyout > .content
{
  background-color: var(--primary);
  color: var(--background);
}
*/
.ui.menu .item
{
  color: var(--background);
}

.ui.header, .ui.menu
{
  font-family: "Merriweather Sans", sans-serif !important;
}

.ui.flyout > .content
{
  padding: 0;
}

.signInBtn
{
  background-color: var(--secondary-300) !important;
  color: var(--text) !important;
}

.main
{
  margin-top: 65px;
}

#mouseOvers, #overwrite, #messenger
{
  display:none; 
}


#frm_login, #frm_finalProcess, #frm_queReservation
{
  width: 500px;
  margin: 50px auto;
  padding: 0px;
}

.ui.segment.signInSegment
{
    background: var(--secondary);
    height: 87px; 
    font-size: 45px; 
    text-shadow: 2px 5px 5px black; 
    text-align: center; 
    margin:auto; 
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ui.form:not(.initial) .field input:invalid {
  box-shadow: inset 0 0 5px var(--background);
}

.ui.container
{
  margin-top: 10px !important;
  margin-bottom: 25px !important;
}

.ui.container a, .reserveItNoAppointment
{
  font-weight: bold;
  color: var(--accent);
}

.ui.info.message
{
  background-color: var(--background-800);
}

.ui.info.message .header
{
  color: var(--text-600);
}

.ui.info.message 
{
  box-shadow: 0 0 0 1px var(--text-600) inset,0 0 0 0 transparent !important;
}

.ui.form .fields.expertise  
{
  display: flex !important; 
  flex-direction: row !important; 
  flex-wrap: wrap !important; 
  justify-content: space-evenly !important;
}

.ui.invisible.checkbox.expertise
{
  margin: 2px !important;
  padding: 5px 10px;
  background: var(--secondary);
  border-radius: 12px;
}

.ui.button.positive
{
  background-color: var(--primary) !important;
  color: var(--background) !important;
}

.redAccent
{
  background-color: var(--redAccent) !important;
}

.ui.raised.segment, .ui.raised.card
{
  box-shadow:0 2px 4px 0 rgba(205,184,255,.20),0 2px 10px 0 rgba(205,184,255,.25) !important;
}

.ui.vertical.menu.advisorClientList
{
  background-color: var(--background) !important;
}

.ui.vertical.menu.advisorClientList a
{
  color: var(--accent) !important;
}

.currentPage
{
  color: var(--accent) !important;
}

.segmentScroll
{
  overflow: auto !important; 
  scrollbar-color: var(--accent-950) var(--background-950) !important;
}

.content.userMessage .segment
{
  color: var(--text);
}

.addCursor
{
  cursor:pointer;
}

.defaultBox
{
  border:thin solid var(--accent);
}

.turnedOff
{
  color:#999 !important; 
}

.advisorStatus
{
  position: absolute;
  top: 271px;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-weight: bold;
  border: 3px solid white;
  font-size: 20px;
  left: calc(width/2);
  left: 50%;
  transform: translateX(-50%);
}

.advisorOnline
{
  background-color: green;
}

.advisorOffline
{
  background-color: black;
}

.advisorBusy
{
  background-color: red;
}

.cardText, .cardText a
{
  color: var(--secondary) !important;
}

.advisorReviewStar
{
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--secondary);
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
}

.advisorCard:hover
{
  background-color: var(--accent) !important;
}

.ui.divider > .icon
{
  font-size: .6rem;
}

.calSquareColor
{
  background-color: var(--background-900) !important;
}

.reserveItNoAppointment i, .reserveItNoAppointment
{
  color: gray !important;
  font-size: 1rem !important;
}


.eventDiv
{
  /*text-align:left;
  
  float:left;
  margin: 10px;
  */
  padding:0px !important;
  width:430px;
}

.rCorners
{
  border-radius: 1em 1em 0em 0em !important;
  -moz-border-radius: 1em 1em 0em 0em !important;
  -webkit-border-radius: 1em 1em 0em 0em !important;
}

.evtSched
{
  box-shadow: 0px 0px 1em var(--darkGreenAccent) !important;
  -moz-box-shadow: 0px 0px 1em var(--darkGreenAccent) !important;
  -webkit-box-shadow: 0px 0px 1em var(--darkGreenAccent) !important;
}

.evtSched .eventH4,.evtSched .eventH4 a
{
  /*background-color: #030;*/
  background-color: var(--darkGreenAccent) !important;
  color: var(--background) !important;
  padding: 5px;
}

.evtActive
{
  box-shadow: 0px 0px 1em var(--primary) !important;
  -moz-box-shadow: 0px 0px 1em var(--primary) !important;
  -webkit-box-shadow: 0px 0px 1em var(--primary) !important;
}

.evtActive .eventH4,.evtActive .eventH4 a
{
  /*background-color: #030;*/
  background-color: var(--primary) !important;
  color: var(--background) !important;
  padding: 5px;
}

.evtCancel
{
  box-shadow: 0px 0px 1em var(--redAccent) !important;
  -moz-box-shadow: 0px 0px 1em var(--redAccent) !important;
  -webkit-box-shadow: 0px 0px 1em var(--redAccent) !important;
}

.evtCancel .eventH4,.evtCancel .eventH4 a
{
  background-color: var(--redAccent) !important;
  color: var(--background) !important;
  padding: 5px;
}

.evtMissed
{
  box-shadow: 0px 0px 1em var(--goldAccent) !important;
  -moz-box-shadow: 0px 0px 1em var(--goldAccent) !important;
  -webkit-box-shadow: 0px 0px 1em var(--goldAccent) !important;
  /* border: thin solid #FC0;*/
}

.evtMissed .eventH4
{
  background-color: var(--goldAccent) !important;
  padding: 5px;
}




/* not checked yet 
.eventH4, .profileH4
{
  padding: 5px 0px;
  margin: 0px;
  text-align:center;
  width:100%;
}
*/
.turnedOff
{
  color:#999; 
}


/*
.evtSched
{
  border: thin solid #030;
}
*/


/*
.evtCancel
{
  border: thin solid #900;
}
*/



.evtComplete
{
  
}

.evtComplete .eventH4
{
  background-color:#030;
}

.evtResched
{
  border: thin solid #FC0;
}

.evtResched .eventH4
{
  background-color: #FC0; color:#900;
}

.evtError
{
  border: thin solid #900;
  box-shadow: 0px 0px 1em #F00;
  -moz-box-shadow: 0px 0px 1em #F00;
  -webkit-box-shadow: 0px 0px 1em #F00
}

.evtError .eventH4
{
  text-align:left; background-color: #900;
}

.clientDate
{
  text-decoration:none;
  font-weight:bold;
}

.pastDueDate
{
  background-color: var(--redAccent) !important;
  box-shadow: 0 1px 3px 0 var(--redAccent),0 0 0 1px var(--redAccent) !important;
}