/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap');/*Fonts: */

@font-face {
  font-family: Cairo-VariableFont;
  src: url('fonts/static/Cairo-SemiBold.ttf');
}

/* Variables: */

:root {
  --body_background: white;
  --site_background: #ebedf0;
  --tab_background: rgba(193, 222, 253,100);
  --tab_hover_background: rgba(239, 247, 255,100);
  --border_color: rgba(150, 185, 220, 0.74);
  --message_color: #0b4d01;
  --sucess_border: green;
  --sucess_bcgrnd: rgba(190, 241, 190, 0.50);
  --close_color: #dedee0;
  /* Font color */
  --font_color_all: #414141;

  /* Sessions */
  --sestime_color: #7704c4;
  --ses_time_divs_min_width: 25%;
  --taken_background: rgb(181, 216, 252);/* rgba(193, 222, 253, 0.75);*/
  --taken_hover_background: rgba(207, 229, 253, 0.75);
  --excuse_background: rgba(241, 50, 50, 0.2);
  --excuse_hover_background: rgb(241 50 50 / 0.3);

  --cancelled_background: rgba(250, 252, 167, 0.7);
  --cancelled_hover_background: rgba(250, 252, 167, 0.1);

  --absence_background: rgba(252, 166, 109, 0.7);
  --absence_hover_background: rgba(252, 166, 109, 0.1);
  --gradientGray:linear-gradient(#fff, #ccc);
  --gradientBasic:linear-gradient(var(--taken_hover_background),var(--taken_background));
  --gradientBasicLight:linear-gradient(#fbfcfc,var(--taken_background) 98%);
}
.takenbkgrnd{
  background-color: var(--taken_hover_background);
}

option[data-sesstat="1"], option[data-sesstat="6"]{
  background-color: var(--taken_background);
}

option[data-sesstat="0"], option[data-sesstat="5"]{
  background-color: rgba(222, 222, 222, 0.75);
}

.excusebkgrnd{
  background-color: var(--excuse_hover_background);
}
option[data-sesstat="2"], option[data-sesstat="7"]{
  background-color: var(--excuse_background);
}

.cancelbkgrnd{
  background-color: var(--cancelled_hover_background);
}
option[data-sesstat="4"], option[data-sesstat="9"]{
  background-color: var(--cancelled_background);
}

.absbkgrnd{
  background-color: var(--absence_hover_background);
}

option[data-sesstat="3"],option[data-sesstat="8"]{
  background-color: var(--absence_background);
}

/*Font sizes*/
.nteFsize{
  font-size:.8em;
  font-weight: normal;
  text-align: left;
}

body {
  direction: ltr;
  /*min-width:440px;*/
  background-color: var(--body_background);
  color: var(--font_color_all);
  line-height:20pt;
  font-family: "DM Sans",sans-serif;
  /*margin-top: 10px;*/
  /*text-align: left;*/
}

.basefontcolor{
  color: var(--font_color_all);
}

.topmessagecont{
  display: flex;
  justify-content: center;
  background-color: rgba(252, 49, 49, 0.2);
  padding: 5px;
  margin: 0 0 10px 0;
  color: rgb(205, 1, 1);
  font-size: 0.7em;
  align-content: center;
  border-radius: 7px;
}

.discardbtn{
  cursor: pointer;
  border: 1px solid rgba(219, 3, 3, 0.7);
  padding: 3px;
  margin: 0 10px 0 10px;
  font-size: 0.9em;
}
.discardbtn:hover{
  background-color: rgba(252, 49, 49, 0.25);
  transition: 0.6s;
}


.allsite{
  font-size: 18px;
}

h1{margin:1em 0 1em 0em;  font-size: 2.8em; font-weight: 700; }
h2{margin:0.8em .8em .8em .8em;  font-size: 1.6em; font-weight: 700; line-height: 1.1em}
h3{margin:0.6em 1.4em .6em 1.4em;  font-size: 1.3em; font-weight: 700; }
h4{margin:0.6em 2.2em 0.2em 2.2em; font-size: 1em;   font-weight: 700;
  color: darkred;
}

p {margin:0.2em 3em 0 3em;
text-align: justify;}


.whiteBackgrnd{
  background-color: white;
}


.topHeader{
  display:flex;
  justify-content: space-evenly;
}
.controlmenu {
  display: flex;
  align-items: flex-end;   /* the tabs stand on the line below, not float above it */
  width: 100%;
  /*direction: rtl;*/
  /* One line along the bottom of the tab row. The active tab breaks it - see
     .controlmenu > a#activeTab further down - which is what makes the selected
     tab read as joined to the screen underneath. */
  border-bottom: 1px solid var(--border_color);
}

/* the -1px is what puts each tab ON the line instead of above it */
.controlmenu > a {
  margin-bottom: -1px;
}

/* The selected tab paints its own segment of the line out in the page colour.
   The band is 3px rather than 1px, with a matching negative margin: at a browser
   or Windows zoom that is not a whole number (125%, 150%) a 1px cover and a 1px
   line round to different device pixels and a hairline of the line survives
   under the tab. Three pixels of page colour cannot miss, and they are
   invisible because the strip below the tabs is that same colour. */
.controlmenu > a#activeTab {
  border-bottom: 3px solid var(--site_background);
  margin-bottom: -3px;
}

/* the live-user counter is not a tab, so it stays where it was */
.controlmenu > .liveUsers {
  align-self: center;
}

.liveUsers,.counterNoti{
  height: 20px;
  min-width:20px;
  background: #00A400;
  border-radius: 25px;
  font-size:.8em;
  color:lightyellow;
  text-align: center;
  line-height:15px;
  cursor: pointer;
  padding:3px;
  margin: 0 5px 0 5px;
}
.liveUsers:hover{
  border:3px solid white;
}
.counterNoti{
  height: 8px;
  min-width:8px;
  margin: 0px;
  line-height: 0.7;
}

.commentcontain{
  display: flex;
  flex-flow: row;
  justify-items: center;
  justify-content: center;
  align-items: center;
  max-width: 50px;
  align-items: flex-start;
}

.controlmenu .platform_name {
  font-size: 1em;
  font-weight: bold;
  margin: 3px 0px 0px 0px;
  margin: 0px;
}
.platform_name{
  text-align: center;
  font-style: italic; color: #ea2323;
  font-size: 0.8em;
  line-height:1em;
}

.controlmenu > a {
  font-size: .9em;
  display: flex;
  width: 14%;
  height: 50px;
  background: var(--tab_background);
  border: var(--border_color) 0.05em solid;
  margin-right: 3px;
  text-align-last: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
  transition: background-color 0.5s;
}



#logo > img {
  border-radius: 5px;
  height: 35px;
  width: 40px;
}

#logo {
  background: var(--site_background);
  border: none;
  max-width: 40px;
}

.image{
  display: block;
  background: var(--site_background);
  border: none;
  width: 100px;
  margin: 5px auto 5px auto;
  border-radius: 5px;
}

.logoarea{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 200px;}

.user_name {
  margin: 0px;
  font-size: .8em;
  padding: 0px;
  font-size: .9em;
}

.logOutArea{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-size: .7em;
}
.logOutArea>*{
  /*margin:0 5px 0 5px;*/
}

#logout img {
  /*width: 36px;*/
  height: 36px;
  border-radius: 50%;
}
#logout {
  display: flex;
  margin: 3px 3px 0 3px;
  justify-content: flex-end;
  background: var(--site_background);
  border: none;
  width: 30px;
}

div {
  padding: 1.2px;
}

.thinDiv{
  margin: 0px;
  padding: 0px;
}

a {
  color: var(--font_color_all);
  text-decoration: none;
}

ul {
  /*padding: 0;*/
  /*list-style: none;*/
}

img {
  display: block;
}

input, textarea, select, button {
  font-family: inherit;
  /*font-size: 0.9em;*/
  /*-webkit-box-sizing: border-box;*/
  /*box-sizing: border-box;*/
  border-radius: 5px;
  /*margin: 0 0 3px 0;*/
}

input, textarea{
  color: #0a58ca;
}

textarea{
  resize: vertical;
  min-height: 30px;
}


.grayFont{
  color: gray;
}

.blackFont{
  color: black;
}

.smallFont{
  font-size: 0.75em;
}

.mediumFont{
  font-size: 0.8em;
}
.largeFont{
  font-size: 1.5em;
}

.sorttask{
  height: 20px;
  width: 20px;
 filter: brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(1289%) hue-rotate(190deg) brightness(88%) contrast(105%);
}


.sessiontimer{
  /*font-family: 'Orbitron', sans-serif;*/
  font-family:"Inconsolata", "Montserrat", sans-serif;
  /*display: flex;*/
  /*justify-content: space-evenly;*/
  min-width:20px;
  font-size: 0.8em;
  font-weight: bold;
  color: black;
  text-align: center;
  background-color: #d4d3d3;
  padding:2px;
  border: 1px solid dimgrey;
  border-radius: 3px;
  box-shadow: 0px 0px 2px #4b4a4a inset;
  margin: 3px;
}


/*==================================( Forms )===============================*/

.smallLink{
  font-size: 0.7em;
  text-decoration: underline;
  color: #0d6efd;
}


.message,.fileMessage, .errorMessages, .warningMessages, .fileErrMessages {
  display: none;
  border: 1px solid var(--sucess_border);
  border-radius:5px;
  background: var(--sucess_bcgrnd);
  position: relative;
  width: 94%;
  min-height: 30px;
  margin: 5px auto 0 auto;
  color:var(--sucess_border);
  padding: 10px;
  /*
  text-align: center;
  */
  margin-bottom: 5px;
  font-size: 0.8em;
}
.errorMessages, .warningMessages,.fileErrMessages {
  border: 1px solid darkred;
  background: var(--excuse_hover_background);
  color:darkred;
  font-size: 0.7em;
}

form {
  display: block;
  position: relative;
}

fieldset, .scheduleContainer {
  display: block;
  border-color: var(--border_color);
  border-width: 1px;
  border-radius: 7px;
  margin:0px;
  min-height: 10px;
  /*width: auto;*/
}
.scheduleContainer {
  /*min-width: 1700px;*/
}







legend {
  font-weight: inherit;
}

label {
  color: black;
  padding: 2px 0 0 0;
  margin: 3px 0 0 0;
  font-size:0.9em;
  line-height:1.6em;
}


input[type="time"] {
  width: 90%;
  background: white;
  margin-left: 5px;
}

input[type="radio"] {
  width: auto;
  vertical-align: middle;
}

.tm,
.tm1 {
  background: white;
  border: thin solid var(--border_color);
  margin-left: 5px;
  width: 98px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
.tm1 {
  width: 110px;
}

select::-ms-expand {
  display: none;
}

.tinyFont{
  font-size: .5em;
}
.microFont{
  font-size: .6em;
}

.languageEn,.languageAr{
  display: block;
  line-height: 10px;
  padding: 0px;
  width: 50px;
  text-align: center;
}
.languageEn{
  float: left;
}

.languageAr{
  float: right;
}

input[type="date"]{
  /*max-width: 100px;*/
  padding: 0px;
}


.txtbx, .txtbx1,.txtbx70, .txtboxnum,.txtLong, .tinytxt, .txtarea,.txtarea100, .txtboxDate,.mediumtxt,.frmGrp1txt1btn input[type="text"]
.frmGrp1txt2btnMax input[type="text"]{
  width: 97%;
  background: white;
  border: thin solid var(--border_color);
  padding: 0 3px 0 3px;
  height: 30px;
  margin: 0px 3px 0px 3px;

}
.txtbx70{
  width:70%;
}
.txtLong{
width:97%;
}

.txtbxRed {
  border: 2px solid red;
}

.txtarea {
  min-height: 70px;
  resize: vertical;
}
.txtarea100{
  width: 100%;
  margin: 2px 0px 2px 0px;
  padding: 3px;
}
.txtbx1 {
  /*width: 500px;*/
}

.txtboxnum {
  width: 125px;
}

.txtboxDate {
  width: 300px;
}

.tinytxt {
  width: 47px;
  font-size: 0.9em;
}

.mediumtxt {
  width: 20%;
  height: 40px;
}

.sTxt{font-size:.7em;}

.searchtxtbx,#searchReport{
  /* The magnifier sits on the field's start edge, vertically centred, at the
     square aspect of searchg.svg (it was stretched 30x25 and pinned 7px from
     the top of a 30px-tall box, so it came out squashed, low and clipped by
     the bottom border). padding-inline keeps the text clear of it in both
     directions; background-position has no logical form, so the RTL sheet
     flips it to the right edge. border-box keeps the widened padding inside
     the declared width. */
  background:white url("../img/icons/searchg.svg") no-repeat left 6px center;
  background-size:18px 18px;
  border: thin solid var(--border_color);
  box-sizing: border-box;
  padding-block: 0;
  padding-inline: 28px 3px;
  width:96%;
  height: 30px;
  margin: 2px 5px 2px 5px;
}

#randPass, .lnikTxt{
  background: var(--site_background);
  text-align:center;
  height:30px;
  border: 1px  solid var(--border_color);
  width:97%;
  font-size: .8em;
}

.buttomsmall, .buttom1,.buttonSquare,.buttomMedium, .attatchbtn, .deleteButton,.editButton,.printButton,.addButton, .reportButton,.reportButton2,.searchButton,.btnxt, .btnprv,
.frmGrp1txt2btnMax input[type="button"],.frmGrp1txt1btn input[type="button"],.button30{
  z-index: 10;
  font-size: 1em;
  min-width: 15px;
  margin:2px 0 3px 0;
  padding: 0 7px 0 7px;
  height: 32px;
  line-height: 35px;
  cursor: pointer;
  position: relative;
  color: var(--font_color_all);
  background-color: var(--tab_background);
  border: 1px solid var(--border_color);
  border-radius: 5px;
  text-align: center;
}

.buttom1 {
  width: 100%;
  height: 35px;
  font-size: 0.7em;
}

.button30{
  height: 30px;
  width: 30px;
}

.buttonSquare{
  height: 70%;
  width: 70%;
}

.buttomsmall{
  /*z-index: 55;*/
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0px;
  max-width: 60px;
  /*height: 41px;*/
  margin: 0 2px 0 2px;
  line-height: 10;
}

.buttom1:hover, .buttomsmall:hover,.buttomMedium:hover, .attatchbtn:hover, .deleteButton:hover,.editButton:hover,.printButton:hover,.addButton:hover,.btnxt:hover,
.reportButton:hover,.reportButton2:hover,.searchButton:hover,.frmGrp1txt2btnMax input[type="button"]:hover,.frmGrp1txt1btn input[type="button"]:hover,.btnprv:hover,
.buttom1:disabled, .buttomsmall:disabled, .edit:hover,.del:hover,.cpy:hover,.buttonSquare:hover,.buttonicon:hover,.buttonicongray:hover,.closeicon:hover,.button30:hover {
  background-color: var(--tab_hover_background);
  transition: 0.6s;
}

.buttom1:active, .buttomsmall:active,.buttomMedium:active, .attatchbtn:active, .deleteButton:active,.editButton:active,
.printButton:active,.addButton:active, .reportButton:active,.reportButton2:active,.btnxt:active,.btnprv:active,
.frmGrp1txt2btnMax input[type="button"]:active,.frmGrp1txt1btn input[type="button"]:active,.buttonicon:active,.buttonicongray:active,.closeicon:active,.button30:active{
  /*background-color: var(--cancelled_background);*/
  background-color: #fbfbc6;
}

.buttom1:disabled, .buttomsmall:disabled {
  color: var(--border_color);
  cursor: not-allowed;
}



.buttom2, .buttontiny,.btnxt,.btnprv {
  width: 96%;
  cursor: pointer;
  position: relative;
  font-weight: bolder;
  background-color: var(--tab_background);
  border: 1px solid var(--border_color);
  color: var(--font_color_all);
  margin: 5px 0 0px 0;
  text-align: center;
}

.buttom2:hover, .buttontiny:hover,.saveBtn:hover,  .saveBtnall:hover, .undoBtn:hover {
  background-color: var(--tab_hover_background);
}
.buttontiny, .btnxt,.btnprv{
  width: 10px;
  height: 10px;
  font-weight: normal;
  padding:0px;
}
.btnxt,.btnprv {
  width: 10px;
  height: 24px;
}

.deleteButton {background-image: url("../img/icons/bin-2.png");}
.attatchbtn{background-image: url("../img/icons/attach_file.svg");}
.editButton{background-image: url("../img/icons/edite-1.png");}
.printButton{background-image: url("../img/icons/print-text.png");}
.reportButton{background-image: url("../img/icons/common-file-text-search.png"); }
.reportButton2{background-image: url("../img/icons/common-file-text-search.png"); }
.searchButton{background-image: url("../img/icons/searchcontent.svg");}
.btnxt{background-image: url("../img/icons/arrow_forward.svg");}
.btnprv{background-image: url("../img/icons/arrow_back.svg");}
.addButton{background-image: url("../img/icons/add24.svg"); background-position: center;}
.btnxt, .btnprv{
  background-size: 20px 20px;
  border-radius:30px;
  background-color: #edebeb;
}

.deleteButton, .attatchbtn, .editButton,.printButton,.addButton,.reportButton,.reportButton2,.searchButton,.btnxt,.btnprv{
  z-index: 1;
  /*max-height: 34px;*/
  min-width:30px;
  max-width: 45px;
  background-size: 20px 20px;
  /*background-position: 9px;*/
  background-position: center;
  background-repeat: no-repeat;
  padding:0px;
  text-align: center;
}

.saveBtn,  .saveBtnall, .undoBtn{
  z-index: 3;
  background-color: var(--tab_background);
  border: 1px solid var(--border_color);
  border-radius: 5px;
  margin: 0 2px 0 2px
}

.tttxtarea{

}

.editregses{
  /*z-index: 55;*/
}

.imgLink{
  height: 20px;
  width: 20px;
  margin:0 3px 0 3px;
  /*padding: 2px;*/
}

.frmGrp1txt2btnMax,.frmGrp1txt1btn{
  display:flex;
  justify-items: center;
  justify-content: center;
  align-items: stretch;
  flex-direction:row;
  /*width:100%;*/
  height:40px;
  margin:0px; padding:0px;
}


.schedulecontroler{
  display: flex;
  margin: 0 5px 0 5px ;
  padding: 0px;
}

/*.date-picker-container {*/
/*  display: inline-block;*/
/*}*/
/*#datepicker {*/
/*  width: 200px;*/
/*}*/
.copyDay{
  display: flex;
}

.copyDay>*{
  width:24px;
  height:24px;
}


.copydayform, .sortThrpform{
 display: none;
}

.copydayfield{
  padding: 20px;
  width:100px;
}

.sotThrpList{
  border: 1px solid var(--border_color);
}

.hoverthrpdata{
  z-index: 60;
}

.frmGrp1txt2btnMax >*,.frmGrp1txt2btnMax input[type="button"],.frmGrp1txt1btn>*,.frmGrp1txt1btn input[type="button"]{
  /*height:100%; min-width: 40px;*/
}

/*Check box slider staff   //////////////////////////////////////////////////////////////////////////////////////*/
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 18px;
  margin: 3px 3px 0 3px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.togslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 18px;
}

.togslider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .togslider {
  /*background-color: #2196F3;*/
  background-color: #2977ff;
}

input:checked + .togslider:before {
  transform: translateX(14px);
}



.displayNone{
  display: none;
}

table.datatable {
  border: var(--border_color) 1px solid;
  border-spacing: unset;
  width: 100%;
}
/*thead, tbody{
    display: block;
}*/






.sideh {
  text-align: left;
}

td {
}
td, td.data {
  border-collapse: collapse;
  /*border: var(--border_color) 1px solid;*/
  text-align: center;
  padding: 3px 0px 3px;
  font-weight: bold;
  font-size: 0.8em;
  /*line-height: 1.2;*/
}


td.datalt,
th.datalt {
  text-align: left;
  padding: 0px;
}

th.datalt {
  /*background: #d1d3d1;*/
  padding-left: 5px;
}

td > div {
  display: inline-block;
}

.inlineBlock{
  display: inline-block;
}

td.data tr {
  background-color: #313131;
}



tr:hover {
  background-color: #ffffff;
  /*transition: background-color .5s;*/
}

tr:checked{
  background-color: #0dcaf0;
}

table > tr > th:hover {
  background-color: #484848;
  margin: 0px;
}
.datalt{

  text-align: left;
}
.datalt,.data{
  font-size: 1em;
}

.tableWrap, .tableWrapWid {
  /*display: inline-block;*/
  max-height: 420px;
  /*border: 1px solid var(--border_color);*/
  overflow: auto;
  padding: 0px;
  margin: 5px 0 10px 0;
}


/* Set header to stick to the top of the container. */
thead tr th{
  z-index:2;
  position: sticky;
  top: 0px;
}

table {
  border-collapse: collapse;
  /*font-size: 1em;*/
  width: 100%;
}

tr{
  border: 1px solid var(--border_color);
  border-radius: 10px;
}
th{
  background-image: var(--gradientBasic);
  padding: 5px 3px 7px 3px;
  /*background-color: var(--tab_background);*/
  font-weight: bold;
  padding: 3px;
  border: 1px solid var(--border_color);

}

tfoot tr th{
}



.settingWid{
  display: flex;
  flex-flow: column;
  align-items: stretch;
  align-content: stretch;
  justify-items: stretch;
  justify-content: stretch;
  width: 450px;
}


.inlineFlex,.flexibleForm{
  display: inline-flex;
  width: 100%;
  justify-items: center;
  gap: 3px;
  justify-content:center;
  align-items: center;
}


.hrLine{
  border:  1px gray;

}

.printIcon{
  display: block;
  background: url("../img/icons/print-text.png") no-repeat;
  background-size: contain;
}

.login_form, .centerDiv{
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 40%;
  height: auto;
  justify-content: center;
  align-items: start;

}
.centerDiv{
  flex-direction: row;
  width: 90%;
  align-items: center;
  margin: 10px;
}

.flexcolumnalignstart{
  display:inline-flex;
  flex-direction: column;
  /*align-items: start;*/
  justify-content: start;
  align-items: start;
  align-self: center;


}

.centersGrid{
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  /*align-items: stretch;*/
  min-height: 150px;
}
.settingGrid{
  /*display: grid;*/
  display: flex;
  /*flex-flow: column;*/
  /*grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));*/
  /*align-items: flex-start;*/
  /*flex-direction: row;*/
  flex-wrap: wrap;
  /*flex-direction: column;*/
  /*align-items: stretch;*/
}

.settingGrid fieldset{
  flex: 1 1 auto;
  min-width: 50px;
}
.accountContainer{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  min-height: 20px;
  font-size: 0.8em;
  padding: 20px 10px 20px 10px;
}
.accountContainer div{
  /*margin: 5px ;*/
}

.ck-editor__editable[role="textbox"] {
  /* Editing area */
  min-height: 200px;
}

.messageContainer{
  max-width:350px;
}
.messageContainer p{
  margin: 0em;
}

.tpc .ck-editor__editable[role="textbox"]{
  direction: ltr;
}
.tpc p, .tpc ul li, .tpc ol li{
  direction: ltr;
  text-justify: auto;
  text-align: left;
  font-family: Arial;
  color: black;
  margin: 0em;
}
.centersGrid .centerWid{
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width:310px;
  min-height: 150px;
  font-size: 0.8em;
  background-color: white;
  box-shadow: 0px 0px 2px 2px #84acc2;
  margin: 5px 5px 5px 5px;
  padding: 5px;
  border-radius:10px;
}

.centersGrid .centerWid:hover{
  box-shadow: 0px 0px 5px 5px #84acc2;
  transition: box-shadow 0.5s;
}


.centerWidHeader{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-height: 170px;
  /*margin: 0 0 10px 0;*/
}



.centerWidbody{
  display: flex;
  flex-direction: column;
  align-items: center;
  /*margin: 10px 0 10px 0;*/
}

.centerItem{
  margin: 5px 0 5px 0;
}

.centerWidFooter{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 150px;
  width: 100%;
  margin: 0 0 10px 0;
  text-align: center;
}

.addCenterBtn{
  display: flex;
  flex-flow: column;
  width:120px;
  height: 150px;
  font-size: 0.8em;
  background-color: rgba(248, 249, 251, 0.23);
  margin: 5px 10px 5px 10px;
  padding: 10px;
  border-radius:10px;
  filter: invert(71%) sepia(5%) saturate(1938%) hue-rotate(157deg) brightness(96%) contrast(79%);
  cursor: pointer;
}
.addCenterBtn:hover{
  box-shadow: 0px 0px 5px 5px #000000;
  transition: box-shadow 0.5s;
}

.smallform {
}

.smallform > form {
}

.allsite {
  display: flex;
  flex-flow: column;
  margin-top:5px;
  margin-right: auto;
  margin-left: auto;
  padding: 5px;
  border-radius: 15px;
  background-color: var(--site_background);
  box-shadow: 0px 0px 3px 3px #84acc2;
}

.main {
  display: block;
}

.header {
  background-color: var(--tab_background);
}

.logout {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  font-size: 0.7em;
}
.logout:hover{
  text-decoration: underline;
  color: darkred;
  font-weight: bolder;
}
.container {

}

#record, #activeTab {
  background-color: var(--site_background);
  border-bottom: none;
  font-weight: bold;
}

.controlmenu > a:hover {
  background: var(--tab_hover_background);
}

/*/////////////////////////////////////////(((         SIDE MENUE       )))///////////////////////////////////////*/

.side-menu {
  z-index: 100;
  min-height: 50px;
  width: 0;
  margin: 0;
  position: fixed;
  top: 100px;
  right: 0;
  background-color: whitesmoke;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 40px 0 20px 0;
  border-radius: 5px 0 0 5px;
  box-shadow: 0px 0px 3px 3px #84acc2;
}

.side-menu a {
  padding: 5px 5px 3px 5px;
  text-decoration: none;
  font-size: 25px;
  /*color: #818181;*/
  display: block;
  transition: 0.3s;
}

.side-menu a:hover {
  /*color: #f1f1f1;*/
  color: darkgrey;
}

.side-menu .close-btn {
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 36px;
  /*color:var(--font_color_all);*/
}

.open-btn {
  z-index: 10;
  height:45px;
  width:30px;
  /*font-size: 30px;*/
  cursor: pointer;
  position: fixed;
  top: 130px;
  right: 0px;
  /*color: var(--font_color_all);*/
  /*background-color: var(--border_color);*/
  background-color: whitesmoke;
  border-radius: 50px 0 0 50px;
  box-shadow: 0px 0px 3px 3px #84acc2;

}

/*==================================(Hover message)===================================*/
.hover-message {
  z-index: 60;
  display: none;
  position: absolute;
  padding: 5px;
  /*font-size: 0.85em;*/
  text-align: justify;
  line-height: 0.9em;
  /*background-color: #fcf0b4;*/
  /*background-color: #d0fcd0;*/
  /*background-color: var(--site_background);*/
  background-color: white;
  color: #050505;
  border-radius: 5px;
  box-shadow: 0px 4px 6px 0px #777676;
  /*white-space: nowrap;*/
  pointer-events: none; /* Prevents the message from interfering with mouse events */
}
.hover-item{
  cursor:pointer;
}



/*==================================( Widget )===============================*/


.dashboard{
  display: flex;
  flex-wrap: wrap;
}

.datawid{
  min-width:330px;
  max-width:600px;
  max-height: 400px;
  min-height: 20px;
  margin: 3px;
  border: 1px solid var(--border_color);
  border-radius:7px;
  font-size:0.8em;
}
.planwid{
  display: flex;
  flex-flow: column;
  min-width:310px;
  max-width: 450px;
  /*max-height: 500px;*/
  background-color: white;
  box-shadow: 0px 0px 2px 2px #84acc2;
  margin: 5px 10px 5px 10px;
  padding: 10px;
  border-radius:10px;
}
.planwid:hover{
  box-shadow: 0px 0px 5px 5px #84acc2;
  transition: box-shadow 0.5s;
}
.subscribedplan{
  background-color: var(--sucess_bcgrnd);
}

.planwid .planhead{
  display: flex;
  justify-content: center;
  align-items:center;
  width:100%;
  height: 40px;
  font-weight: bolder;
  color: black;
}
.planwid .planbody{
  display: flex;
  flex-flow: column;
  width:100%;
}
.planwid .planbody .planitem{
  display: flex;
  font-size: 0.8em;
  margin:15px 10px 15px 10px;
}
.planwid .planbody .planitem span{
  margin: 0 3px 0 3px;
}


.planwid .planbody .planitem .plandata{
  font-size: 1.2em;
  font-weight: bolder;
}
.price{
  color: var(--sucess_border);
  font-weight: bolder;
  font-size: 1.5em;
}


.planwid .planfoot{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  font-size: 0.8em;
  margin: 10px 0px 0px 0px;
}

.datawid .widhead{
  min-height:35px;
  background-image: var(--gradientBasic);
  padding: 3px 3px 0 3px;
  text-align: center;
  line-height:1.4em;
}
.test{
  color: #0262c3;
}

.help_icon{
  width: .9em;
  height: .9em;
  display: inline-block;
}

.searchResults, .tttSeaarchResults{
  display: flex;
  flex-direction: column;
}

.searchResults div, .tttSeaarchResults div{
  display: flex;
  align-items: center;
  flex-direction: row;
  min-height: 40px;
  margin: 2px 0 0 0 ;
  padding: 3px;
  background-color: white;
  cursor: pointer;
  /*border-top:solid 1px var(--border_color);*/
}

.searchResults div:hover{
  box-shadow:0px 0px 1px 1px #84acc2;
  transition: box-shadow 0.5s;
}
.searchResults div span{
  margin: 0px 10px 0 10px;
  color: #bf0404;
}
.searchResults div span:hover{
  text-decoration: underline;
}



.responsiveImg{
  width: 40%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.datawid .widbody{
  font-size:1em;
}

.tableWrapWid {
  max-height: 200px;

}



.datawid .widbody table td{
  font-weight: normal;
  font-size:1em;
  text-align: left;
}

.linksMenue{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  /*font-size: 0.8em;*/
}
.menueLink{
  text-decoration: underline;
  color: #0a58ca;
  cursor: pointer;
}







/*==================================( Side bar )===============================*/
.sidebar {
  display: none;
  font-size: 0.7em;
  overflow-x: hidden;
  overflow-y: auto;
  /*height: 650;*/
}
.sidebar > table {
  border-collapse: collapse;
  width: 100%;
}

.sidebar > table > tbody > tr > td {
  border-bottom: var(--border_color) 0.05em solid;
  padding-bottom: 5px;
  padding-left: 5px;
}
/*==================================( Screen )===============================*/
.mainscreen {
  height: auto;
}

.screencontainer, .formcontainer, .containerB {
  line-height: 1em;
  display: block;
  min-height: 70vh;
}
.formcontainer {
  max-width:800px;
  margin-left: auto;
  margin-right: auto;
}

.txtboxesgrid{
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 4fr;
  align-content: space-evenly;
  justify-items: start;
  align-items: center;
  justify-content: start;
}

.screencontainer > * {
  margin-bottom: 5px;
}
.screen, .regularRecordScreen {
  display: grid;
  grid-template-columns: 22% 77%;
  padding: 0px;
  margin: 5px 0 0 0;
}

.regularRecordScreen {grid-template-columns: 70% 30%;}

.singlesceen{
  min-height: 420px;
}

.rightscreen,.containerA {
  display: block;
  margin:30px 0 0 5px;
  /*overflow: auto;*/
}

.frmscreen {
  display: grid;
  grid-template-columns: 35% 65%;
  padding-top: 10px;
}

.searchCenter{
  margin:30px auto 0 auto;
}

.snglescreen {
  display: grid;
  grid-template-rows: 10% 90%;
}

.dividedscreen {
  display: grid;
  grid-template-columns: 50% 50%;
}

.snglecont {
  max-height: 650px;
}


.tttTaskForm{
  display: grid;
  column-gap:10px;
  grid-template-columns: 75% 22%;
  align-items: center;
}

.tttTaskItem{
  cursor: pointer;
  background-color: white;
}
.tttTaskItem:hover{
  background-color: cornsilk;
}


.paymentstable {
  display: block;
  max-height: 572px;
  overflow: auto;
  font-size: 0.9em;
  text-wrap: normal;
}

.tableheader,
.tablefooter {
  display: grid;
  grid-template-columns: 29.6% 8% 10% 20% 10% 14% 8%;
  background: var(--tab_background);
  width: 98%;
}

.outlaytableheader,
.outlaytablefooter {
  display: grid;
  grid-template-columns: 49.6% 8% 10% 10% 14% 8%;
  background: var(--tab_background);
  width: 98%;
}

.payth,
.paytd {
  display: flex;
  margin-right: 1px;
  background: var(--tab_background);
  color: var(--font_color_all);
  font-weight: 500;
  justify-content: space-between;
  min-height: 25px;
}

.payrw {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 29.6% 8% 10% 20% 10% 14% 8%;
  background: white;
  border: none;
  padding: 1px;
}

.payrw:hover {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 29.6% 8% 10% 20% 10% 14% 8%;
  border: none;
  padding: 2px;
  background: var(--tab_background);
}

.outlayrw {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 49.6% 8% 10% 10% 14% 8%;
  background: white;
  border: none;
  padding: 1px;
}

.outlayrw:hover {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 49.6% 8% 10% 10% 14% 8%;
  background: var(--tab_hover_background);
  border: 0px 1px solid var(--border_color);
  padding: 2px;
  background: var(--tab_hover_background);
}

.paytd {
  display: flex;
  height: 25px;
  background: var(--tab_hover_background);
  justify-content: flex-start;
}

.screenmenu, .smallmenu {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.screenmenu > a, .smallmenu > a {
  font-size: 1em;
  line-height: 110%;
  display: flex;
  width: 150px;
  height: 30px;
  background: var(--tab_background);
  margin-right: 10px;
  margin-top: 3px;
  padding: 3px 3px 3px 3px;
  text-align-last: center;
  cursor: pointer;
  border: var(--border_color) 0.05em solid;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.5s;
  background-image: var(--gradientBasic);
}
.screenmenu > a{
  font-size: .6em;
}
.smallmenu  a {
  font-size: .9em;
  display: flex;
  flex-direction: row;
  height: 35px;
  border-radius: 5px;

}


.screenmenu   a:hover, .smallmenu  a:hover {
  background: var(--tab_hover_background);
}
.screenmenu   a:target{
  background-color: var(--tab_background);
  border: thin solid var(--tab_hover_background);
}
.smallmenu  a:target {
  background-color: var(--site_background);
  border: thin solid var(--tab_hover_background);
  border-bottom: none;
}


#screenmenuebtm {
  background-color: #faf8f8;
  cursor: default;
  background-image: linear-gradient(#fff,#fff);
  cursor: pointer;
}

.uniscreen {
  width: 100%;
  position: relative;
  justify-content: center;
}

.material-icons{
  font-size: 1.2em;
}

.terms{
  width: 100%;
  height: 100vh;
}


.formcover {
  z-index: 80;
  width: 100%;
  height: 100%;
  background: rgba(5, 19, 72, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 1px 1px 10px 1px black;
  cursor: auto;
}

.formfield, .formfieldass {
  z-index: 81;
  width: 30%;
  min-width:350px;
  position: absolute;
  top: 3rem;
  right:1rem;
  left:1rem;
  background: var(--site_background);
  margin: auto;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px black;

}
.formfieldass {
  width: 95%;
}

#saveAss{

}
.formfield fieldset{
}

.sessionForm{
  position:relative;
  margin: 1%;

}

/*ckeditor*/




.closebtn, .closebtnLt {
  /*z-index:2;*/
  width: 15px;
  height: 15px;
  /*right: 2%;*/
  /*top: 1%;*/
  /*position: absolute;*/
  cursor: pointer;
  background: url("icons/remove.png") no-repeat 0 0;
  background-size: 15px;
  /*background-size: 30px;*/
}

.closebtn:hover,.closebtnLt:hover {
  background-color: var(--close_color);
  border-radius: 5px;
}


/* Style the tab */
.tab {
  overflow: hidden;
  border: var(--border_color) 0.05em solid;
  background-color: #f1f1f1;
  margin:0 10px 0 10px;
  padding:0px;
}

/* Style the buttons inside the tab */
.tab input[type="button"] {
  background-color: inherit;
  color: #064198;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 7px;
  transition: 0.3s;
  font-size: 1.2em;
  font-weight: bolder;
  border-radius: 0;
  margin: 0;
  transition: background-color 0.5s;

}

/* Change background color of buttons on hover */
.tab input[type="button"]:hover {
  background-image: var(--gradientBasic);
}

/* Create an active/current tablink class */
.tab input[type="button"].active {
  background-image: var(--gradientBasic);
}

/* Style the tab content */
.tabcontent {
  display: none;
  border: var(--border_color) 0.05em solid;
  border-top: none;
  padding:5px;
  margin:0 10px 10px 10px;
}




.deletesession{
  z-index: 100;
}


.column{
  display: flex;
  flex-direction: column;
}
.discreen, .discreenAdmin {
  display: grid;
  grid-template-columns: 60% 40%;
  width:100%;
}

.formcolumn {
  display: inline-block;
  width: 100%;
}

.leftscreen,
.rightscreen {
  padding: 0px;
}

.leftscreen{
}

.pagetitle {
  display: flex;
  flex-direction: column;
}

.monthform{
  display: block;
  width:100%;
}



.leftcont,
.rightcont {
  display: grid;
  grid-template-rows: 7% 10% 83%;
  margin:10px 0 0 0;
}
.rightcont {
  border: none;
}

.reccasetables,.thrpcont {
  display: grid;
  grid-template-columns: 66% 34%;
  /*font-size: 0.8em;*/
}

.exabstables {
  display: grid;
  grid-template-columns: 50% 50%;
  font-size: 0.8em;
}

.payreptables {
  display: grid;
  grid-template-rows: 55% 30%;
}

.inlineform {
  display: flex;
  flex-direction: row;
  align-content: center;
  gap: 10px;
  min-height: 10px;
}

.ltable,
.sescountrep {
  display: block;
}
.ltableContainer,.rtable{
  margin-top: 20px;
  overflow: auto;
}


.datatr,
.datatrh {
  display: grid;
  grid-template-columns: 8% 25% 10% 12% 8% 30% 7%;
  height: 20px;
  /*margin-top: 2px;*/
  align-content: center;
  justify-items: center;
  justify-content: center;
  border-right: 2px solid var(--border_color);
  border-left: 2px solid var(--border_color);
}

.exabstrh {
  display: grid;
  grid-template-columns: 7% 26% 12% 55%;
  height: 20px;
  margin-top: 2px;
  align-content: center;
  border-right: 2px solid var(--border_color);
  border-left: 2px solid var(--border_color);
}

.exabstr {
  display: grid;
  grid-template-columns: 7% 26% 12% 55%;
  height: 20px;
  margin-top: 2px;
  align-content: center;
  border-right: 2px solid var(--border_color);
  border-left: 2px solid var(--border_color);
}

.pyrptr,
.pyrptrh {
  display: grid;
  grid-template-columns: 8% 13% 13% 13% 13% 13% 13% 13%;
  height: 20px;
  margin-top: 2px;
  align-content: center;
}

.datatr,
.pyrptr,
.exabstr {
  background: white;
}

.datatr:hover {
  display: grid;
  grid-template-columns: 8% 25% 10% 12% 8% 30% 7%;
  height: 20px;
  margin-top: 2px;
  background: var(--tab_hover_background);
}

.exabstr:hover {
  display: grid;
  grid-template-columns: 7% 26% 12% 55%;
  height: 20px;
  margin-top: 2px;
  background: var(--tab_hover_background);
}

.pyrptr:hover {
  display: grid;
  grid-template-columns: 8% 13% 13% 13% 13% 13% 13% 13%;
  height: 20px;
  margin-top: 2px;
  background: var(--tab_hover_background);
  cursor: pointer;
}

.datatd,
.datath {
  border-bottom: 1px solid var(--border_color);
  border-left: 1px solid var(--border_color);
  border-top: 2px solid var(--border_color);
  width: 100%;
}
.datath {
  background: var(--tab_background);
  /* was `border-left: var(--border_color)` - a colour with no style, which CSS
     resolves to `none`. Spelled out so the intent is readable. */
  border-left: none;
  border-right: none;
}

.datatd {
  border-top: none;
}

.datatd,
.datathm {
  color: var(--font_color_all);
}

.totaltables {
  display: flex;
  flex-direction: row;
  min-height: 200px;
  padding: 0px;
  width:100%;
}

.costable, .paytable{  width: 100%;}
.costable {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: 25% 25% 25% 25% 0;
  /*align-content: center;*/

}

.paytable {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: 30% 40% 30%;
}

.rwtitle,
.rwdata {
  display: flex;
  border: 1px solid var(--border_color);
  background: var(--tab_background);
  color: var(--font_color_all);
  align-items: center;
  padding: 7px;
}
.rwdata {
  background: var(--tab_hover_background);
  font-weight: 700;
  justify-content: center;
}

.rightscreendata {
  display: block;
  height: 800px;
  font-size: 0.8em;
  overflow-x: hidden;
  overflow-y: auto;
  /*border: 1px solid var(--border_color);*/
margin:3px 0 0 0;
}

.rightscreenrow {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-bottom: 1px solid var(--border_color);
  font-size: .9em;
}

.rightscreenrow:hover {
  background: var(--tab_hover_background);
}
.rightscreenrow4col {
  display: grid;
  grid-template-columns: 60% 15% 13% 12%;
  width: 100%;
  border-bottom: 1px solid #393939;
  border-top: 1px solid #393939;
}

.rightscreenrow4col:hover {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-content: stretch;
  border-bottom: 1px solid var(--border_color);
  border-top: 1px solid var(--border_color);
  background: var(--tab_hover_background);
}

.rowusername{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.rowusername:hover {
  cursor: pointer;
}


.controller_del > a {
  display: block;
  position: inherit;
  float: right;
  color: #f6682f;
  padding-left: 5px;
}

.controller_del > a:hover {
  display: block;
  position: inherit;
  float: right;
  color: #b73302;
}
.controller_ed{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*min-width: 25%;*/

}
.controller_ed > a {
  display: block;
  position: inherit;
  float: right;
  color: #00b68b;
  padding-left: 5px;
}

.controller_ed > a:hover {
  display: block;
  position: inherit;
  float: right;
  color: #038d6d;
}

.icon,
.iconLarge,
.iconwhite {
  height: 15px;
  width: 15px;
  /*background: rgba(193, 222, 253, 0.75);*/
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;

}
.iconwhite {
  border: lightgray solid 0.02em;
}

.icon:hover,
.iconwhite:hover {
  height: 15px;
  width: 15px;
  /*margin: 2px;*/
  background: rgba(239, 247, 255, 0.75);
  border: var(--border_color) solid 0.02em;
  /*padding: 2px;*/
}

.iconLarge {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.fileIcon{
  height: 34px;
  width: 34px;
}
.icon15{
  height: 15px;
  width: 15px;
}
.icon24{
  height: 24px;
  width: 24px;
}
.icon30{
  height: 30px;
  width: 30px;
}

.icon35{
  height: 35px;
  width: 35px;
}

.icon40{
  height: 40px;
  width: 40px;
}

.icon60{
  height: 60px;
  width: 60px;
}

/*.iconLarge:hover{*/
/*    height: 22px;*/
/*    width: 22px;*/
/*    margin: 2px;*/
/*    ackground: rgba(239, 247, 255, 0.75);*/
/*    padding: 2px;*/
/*    border-radius: 3px;*/
/*    margin-right: 10px;*/
/*}*/
.iconwhite {
  background-color: #fff;
}

.edit, .del, .cpy{
  width: 35px;
  height: 35px;
  background-color: var(--tab_background);;
  cursor: pointer;
  color: var(--font_color_all);
  border: none;
}

.deleteicon {
}

.deleteicon > a {
}

.note {
  color: darkgrey;
}

.amount {
  color: #089103;
}

.evalData{
  display: none;
  direction: ltr;
}


.smalldatalist {
  display: block;
  margin-top: 5px;
  width: 100%;
  max-height: 200px;
  padding: 0px;
  border: 1px solid #484848;
  overflow: auto;
}

.smalldatalistHr,
.smalldatalistHr1col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1px;
  background: #aeafaf;
  height: 25px;
}

.smalldatalistHr1col {
  grid-template-columns: 1fr;
}
.smalldatalistHd {
  display: flex;
  background: var(--tab_background);
  justify-content: center;
}

.smalldatalistr,
.smalldatalistr1col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  background: var(--tab_background);
  height: 20px;
  margin-bottom: 10px;
}
.smalldatalistr1col {
  grid-template-columns: 1fr;
}

.smalldatalistd {
  display: flex;
  background: white;
  justify-content: start;
  border-bottom: 1px solid var(--border_color);
}

.smalldatalist > * {
  padding: 0px;
}

.rec_btm {
  /* background: crimson; */
  height: 5px;
  width: 5px;
  border-radius: 10px;
  border: solid 1px #ab0325;
  background-color: #f89083;
  animation-name: rec_btm;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
@keyframes rec_btm {
  0% {
    background-color: #f89083;
    border-color: #ab0325;
  }
  50% {
    background-color: #dc143cff;
    border-color: #f89083;
  }
  100 {
    background-color: #ab0325;
    border-color: #f89083;
  }
}
/* Joined input+button groups. Physical left/right here: LTR geometry lives in
   this sheet, the RTL mirror is in alllightgrayAr.css.
   LTR order is  [ field ][ button ]( [ button ] ) - so the FIRST child is
   rounded on its left and loses its right border, the LAST child is rounded on
   its right and loses its left border, and any middle button is square. */
.frmGrp1txt2btnMax >*:nth-child(1),.frmGrp1txt1btn >*:nth-child(1){
  border-right:  solid var(--border_color) 0px;
  border-radius: 5px 0px 0px 5px;
  margin: 2px 0px 2px 5px;
}
.frmGrp1txt1btn .reportButton,.frmGrp1txt1btn .reportButton2{
  border-left:  solid var(--border_color) 0px;
  border-radius: 0px 5px 5px 0px;
}
/* last of a 2-part group: rounded on the outer (right) side */
.frmGrp1txt1btn input[type="button"]:nth-child(2){
  border-left:  solid var(--border_color) 0px;
  border-radius: 0px 5px 5px 0px;
}
/* middle of a 3-part group: square on both sides */
.frmGrp1txt2btnMax input[type="button"]:nth-child(2){
  border-right:  solid var(--border_color) 0px;
  border-left:  solid var(--border_color) 0px;
  border-radius: 0px;
}

.frmGrp1txt2btnMax >*:nth-child(3){
  border-radius: 0px 5px 5px 0px;
}

.frmGrp1txt2btnMax input[type="text"]{
}





.standby_btm {
  height: 5px;
  width: 5px;
  border-radius: 10px;
  background-color: #696e56;
  animation-name: standby_btm;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes standby_btm {
  0% {
    background-color: #696e56;
  }
  50% {
    background-color: #d9fa48;
  }
  100 {
    background-color: #cff817;
  }
}

.pulsed_note {
  color: #f89083;
  animation-name: pulsed_note;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
@keyframes pulsed_note {
  0% {
    color: #f89083;
  }
  50% {
    color: #dc143cff;
  }
  100 {
    color: #ab0325;
  }
}

.yellow_note {
  margin: 5px;
  font-size: .8em;
  padding: 10px;
  background-color: #fdf4c9;
  color: #1f1f1f;
  border: 1px ridge #545454;
  transition: -webkit-box-shadow 0.5s;
}
.yellow_note:hover {
  margin: 5px;
  color: #1f1f1f;
  cursor: pointer;
  border: 1px ridge #545454;
  -webkit-box-shadow: 0px 0px 2px 1px black;
}


.painslider{
  width:100%;
}

/*===================================*/
/*             QR code staff         */
/*===================================*/

#scanner-container {
  position: relative;
  width: 350px;
  height: 350px;
  margin: 0 auto;
}
#scanner-video {
  width: 100%;
  height: 100%;
  background-color: #000;
}
#scan-region {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 65%;
  /*border: 3px dashed #fff;*/
}
#result {
  text-align: center;
  font-size: 1.5em;
  margin-top: 20px;
}

.loadingCenter{
 width:100px;
  margin-left: 100%;
  margin-right: 100%;
}


/*For qr code sniper*/
.scanner-frame {
  --corner-size: 30px;
  --corner-thickness: 3px;
  --corner-color: #00ff00;
  --border-opacity: 0.3;

  position: relative;
  width: 260px;
  height: 260px;
  margin: 20px auto;
  background:
    /* Quadrant Top-Left (L-shape) */
          linear-gradient(to bottom, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 0 0 / var(--corner-size) var(--corner-size),
          linear-gradient(to right, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 0 0 / var(--corner-size) var(--corner-size),

            /* Quadrant Top-Right (L-shape mirrored) */
          linear-gradient(to bottom, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 100% 0 / var(--corner-size) var(--corner-size),
          linear-gradient(to left, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 100% 0 / var(--corner-size) var(--corner-size),

            /* Quadrant Bottom-Left (L-shape rotated) */
          linear-gradient(to top, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 0 100% / var(--corner-size) var(--corner-size),
          linear-gradient(to right, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 0 100% / var(--corner-size) var(--corner-size),

            /* Quadrant Bottom-Right (L-shape rotated and mirrored) */
          linear-gradient(to top, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 100% 100% / var(--corner-size) var(--corner-size),
          linear-gradient(to left, var(--corner-color) 0% var(--corner-thickness), transparent var(--corner-thickness) 100%) 100% 100% / var(--corner-size) var(--corner-size),

            /* Center area (transparent) */
          linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, var(--border-opacity));
}

/* Add animation to scanner frame*/
.scanner-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
          to right,
          transparent,
          var(--corner-color),
          transparent
  );
  box-shadow: 0 0 10px var(--corner-color);
  animation: scan 2s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}


/* Border classes */

/*==================================( Footer )===============================*/

.footer {
  position: relative;
  background-color: var(--site_background);

}

.footerflex{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.footerflex div{
  min-width: 50px;
}

.chkbxsrvcont {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.tentcols {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 4fr 1fr 4fr 1fr 4fr;
  align-items: center;
  align-content: space-evenly;
}

.twocols {
  display: grid;
  grid-template-columns: 50% 50%;
}

.fourcols{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.sixcols{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  font-size: .9em;
}

.flexbox ,.flexBoxStretched{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width:100%;
  align-items: center;
}

.flexBoxStretched{
  flex-flow: row;
  /*justify-content: stretch;*/
}

.flexboxRow, .flexboxColumn,.flexboxRowNoWrap,.flexboxRowNoWrapStart,.flexboxRowNoWrapEnd  {
  display: flex;
  flex-direction: row;
  padding: 0px;
}
.flexboxRow, .flexboxColumn{
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.flexboxRowNoWrap  {
  flex-wrap: nowrap;
}

.flexboxRowNoWrapStart  {
  flex-wrap: nowrap;
  align-items: start;
  justify-content: start;
}

.flexboxRowNoWrapEnd  {
  flex-wrap: nowrap;
  align-items: end;
  justify-content: end;
}

.flexItem{
  margin:0 2% 0 0;
}

.flexboxRow{
  flex-direction: row;
}
.wraptext{
  display: flex;
  flex-wrap: wrap;
}


.flexboxColumn {
  align-items: start;
  flex-direction: column;
}

.flexboxCenter{
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}



.btns {
  display: flex;
}

.startendgrid {
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 8px;
  /*justify-items: center;*/
}

.radiogroup {
  display: inline-block;
  width:100%;
}

.radiogroup > * {
  vertical-align: middle;
}

.thrpcont {
  display: grid;
  grid-template-columns: 75% 25%;
  column-gap: 3px;
}

.ltcont {
display: flex;
  flex-direction: column;
  /*max-height: 700px;*/
  /*border: #5F5F5F 1px solid;*/
}

.exccont,
.sescont {
  overflow-y: auto;
}

.gridrow5050 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /*margin-top: 45px;*/
  width:auto;
  overflow: auto;
}

.srvRow{
  display: none;
}


.charts{
  max-width: 100%;
  min-height: 420px;
  border: 1px solid var(--border_color);
  border-radius:5px;
  background-color:white;
}

/*==========================================================*/
/*  Session style :  */
/*==========================================================*/
/* CSS Document */




.userrow {
  display: flex;
  align-content: stretch;
  text-align: left;
  width: 100%;
  margin:0 5px 0 5px;
  border-bottom: 1px solid var(--border_color);
}

.userrow:hover {
  background: var(--tab_hover_background);
  cursor: pointer;
}

.fileid {
  margin:0 5px 0 5px;
  max-width:25%;
  padding-left: 5px;
  color:gray;
  font-size: 1em;
}
.username {
  max-width:75%;
  text-wrap: normal;
  /*text-align:left;*/
}


.messageBody .message{
  display: block;
  background-color:transparent;
  color: #0c4128;
  font-size: 1em;
  border: none;
}

.messageBody > .image >img{
  display: block;
  width:250px;
  height: 250px;
}
.messageBody > .image{
  display: block;
  width:200px;
  min-height: 100px;
}

.notiMessage{
  line-height: 1.5em;
  /*display: none;*/
}
.sessions ,#notiMessagesContainer,.topicsContainer{
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 720px;
  width:100%;
}

.message ul{
  list-style-type: none;
}

.quizContainer{
  margin: 0;
  color: black;
  font-family: Arial;
  font-size: 0.8em;
}
.quizContainer >div{
  margin: 0px;
}
.question{
  border:1px solid #cacaca;
  padding: 5px 10px 5px 10px;
  margin: 5px 0 0 0;
}
.question ol{
  margin: 0 0 0 10px;
}
.question p{
  margin: 0;
}
.removeChoice,.removeQuestion{
  cursor: pointer;
}

.qcontrolers{
  float: right;
}

.underline{
  text-decoration: underline;
  font-weight: bold;
}



.tutorialItem{
  /*border: 3px solid red;*/
  /*box-shadow: 1px 1px 800px 200px #393939;*/
}

.siteCover {
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(5, 19, 72, 0.5);
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*box-shadow: inset 1px 1px 10px 1px black;*/
  cursor: auto;
}


.sessionm , .sessiontaken, .sessionexcuse, .sessionabsence, .sessioncancell{
  /*z-index: 10;*/
}


.today_payments{display: block;}
.session, .schedSes {
  background: rgba(222, 222, 222, 0.75);
  border: 1px solid var(--border_color);
  /*border: 5px solid black;*/
  border-radius: 5px;
  box-shadow: 1px 1px 2px #4b4a4a;
  margin-bottom: 5px;
  padding: 5px;
  transition: background-color 0.5s;
  font-size: 0.9em;
}



.session:hover, .schedSes:hover , .savearea:hover {
  background: #fdfcfd;
  cursor: pointer;
}

.sessiontaken {
  background: var(--taken_background);
  border: 1px solid var(--border_color);
  border-radius: 5px;
  box-shadow: 0px 1px 2px var(--font_color_all);
  margin-bottom: 5px;
  padding: 5px;
  color: var(--font_color_all);
  transition: background-color 0.5s;
}

.sessiontaken:hover {
  background: var(--taken_hover_background);
  cursor: pointer;
}

.sessionexcuse {
  background: var(--excuse_background);
  border: 1px solid rgba(241, 50, 50, 0.5);
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgb(93, 21, 21);
  margin-bottom: 5px;
  padding: 5px;
  color: var(--font_color_all);
  transition: background-color 0.5s;
}

.sessionexcuse:hover {
  background: var(--excuse_hover_background);
  cursor: pointer;
}

.sessionabsence {
  background: var(--absence_background);
  border: 1px solid #fca66d;
  border-radius: 5px;
  box-shadow: 0px 1px 2px #462713;
  margin-bottom: 5px;
  padding: 5px;
  transition: background-color 0.5s;
}

.sessionabsence:hover {
  background: var(--absence_hover_background);
  border: 2px solid #fc8f46;
  cursor: pointer;
}

.sessioncancell {
  background: var(--cancelled_background);
  border: 1px solid #fafca7;
  border-radius: 5px;
  box-shadow: 0px 1px 2px #565729;
  margin-bottom: 5px;
  padding: 5px;
  transition: background-color 0.5s;
}

.sessioncancell:hover {
  background: var(--cancelled_hover_background);
  border: 2px solid #fafca7;
  cursor: pointer;
}

.sesrow{
  display:flex;
  align-items:center;
  margin:3px 0 3px 0;
}

.sesrow1,.sesrow22,.sesrow2,.sesrow3{
  display: flex;
  align-items:center;
  /*margin:5px 0 5px 0;*/
}
.sesrow1,.sesrow2{border-top: 1px solid var(--border_color);}

.sesrow1 {justify-content: start;}
.sesrow2,.sesrow22 {justify-content: space-between;
}
.sesrow3{justify-content: center;}

.sesrow > *,
.sesrow1 > * {
  /*display: inline-block;*/
}

.topsesrow {
  display: flex;
  justify-content: flex-end;
}

.sesHead,.sesBody{padding:0; margin:0;}

.sesno {
  width:20px;
  display: flex;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  margin: 0 3px 0 3px;
  padding: 3px;
  font-weight: bold;
  justify-content: center;
  background-color:var(--close_color);
  padding:3px;
  min-width:25px;
}

.sestype {
  font-weight: bold;
}

.sestime {
  display: flex;
  font-style: italic;
  color: var(--sestime_color);
  font-size: 0.8em;
}
.sestime div {
  display: inline-block;
  min-width: 20%;
}

.sestherp {
  display: flex;
  max-width: 50%;
  color: darkgreen;
}

.sesmodr {
  display: flex;
  max-width: 50%;
  float: right;
}

input[type="time"] {
  margin-left: 0px;
}

.scheduleWrap{
  /*display: inline-block;*/
  /*border: 1px solid var(--border_color);*/
  overflow: auto;
  padding: 0px;
  margin: 5px 0 10px 0;
  /*overflow-y: hidden;*/
  scroll-snap-align:start;
  max-height: 100vh;
}

.scheduleContainer{
  position: relative;
  height: 100%;
  padding-top: 10px;
  min-height: 100vh;
  /*
  overflow-y: auto;
  overflow-x: hidden;
  */
}

.scheduleSes{
  text-align: center;
}

.schedHour{
  border-left: none;
  width: 90px;
}
.schedHead{
  position: relative;
  height: 10px;
  border-bottom: 1px solid var(--border_color);
  /*border-right: 1px solid var(--border_color);*/
  margin: 0px;
  padding: 0px;
}
.schedHead span,.halfH{
  /* Above the ruler row's own day/therapist cell (60): a centred label sits half in
     the previous slot, and for the first one that is the day cell - at 40 it was
     painted underneath and came out clipped. Only affects the ruler's own cell;
     the whole ruler row (z-index 70) still paints above the schedule rows. */
  z-index:62;
  min-width: 7px;
  direction: ltr;
  height: 35px;
  position: absolute;
  top:-10px;
  /* Centre the label on the grid line of its own time: that line is the cell's
     start edge (left here, right in the RTL sheet), so sit on it and pull back by
     half the label's width. NB physical left/right - these spans are
     writing-mode: vertical-lr, so inset-inline-* would resolve to the vertical axis. */
  left: 0;
  right: auto;
  writing-mode: vertical-lr;
  transform: translateX(-50%) rotate(180deg);
  line-height: 11pt;
  /*border-radius: 5px;*/
  text-align: center;
  padding: 1px;
  font-size: 0.8em;
  font-weight: bold;
  background-color: #f2f2f2;
  border: solid lightgray 1px;
  border-radius: 30%;
}
/* Vertical line marking the half-hour under the pointer, down the whole schedule.
   Added by the script inside .scheduleContainer (which is position:relative).
   z-index 3 keeps it under the pinned day/therapist column (60) and the ruler (70). */
.hourLineHover{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin: 0;
  padding: 0;
  background-color: rgba(122, 252, 135, 0.95);
  box-shadow: 0 0 3px rgba(60, 200, 80, 0.75);
  z-index: 3;
  pointer-events: none;
  display: none;
}

/* Small gray box that follows the cursor with the time of the block under it.
   It wipes open out of the cursor: .wipeL when the box sits to the right of the
   pointer, .wipeR when it had to flip to the left near the screen edge. */
.schedTimeTip{
  position: fixed;
  z-index: 60;
  display: none;
  margin: 0;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: rgb(110 109 109 / 0.92);
  color: #ffffff;
  font-size: 0.55em;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
  direction: ltr;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.schedTimeTip.wipeL{
  animation: schedTipWipeL 180ms ease-out;
}
.schedTimeTip.wipeR{
  animation: schedTipWipeR 180ms ease-out;
}

@keyframes schedTipWipeL{
  from{
    clip-path: inset(0 100% 0 0);
    transform: translateX(-7px);
    opacity: 0.35;
  }
  to{
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes schedTipWipeR{
  from{
    clip-path: inset(0 0 0 100%);
    transform: translateX(7px);
    opacity: 0.35;
  }
  to{
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* the ruler label for the time the pointer is over, in the same light green as
   the row hover (.schedualRow:hover) - declared BEFORE .timeHighlight so that a
   dropped session's marked time keeps its stronger green while hovering */
.schedHead span.timeHover{
  background-color: var(--sucess_bcgrnd);
  box-shadow: 0 0 0 1px rgba(122, 252, 135, 0.9);
}

/* the ruler label for the time a session has just been dropped on:
   same green as the dropped session itself (.droppedses) */
.schedHead span.timeHighlight{
  background-color: rgba(122, 252, 135, 1);
  color: #13400f;
}

.schedHead .halfH{
  background-color: #dfdddd;
  margin-right: 0; /* any side margin would push the label off its line */
  /*font-size: 0.8em;*/
  /*padding: 0px;*/
}
.schedHalf{
  position:relative;
  margin: 2px 0 2px 0;
  /*height: 50px;*/
}
.schedThrp,.schedHeadStart, .schedThrpHead{
  z-index: 3;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;          /* fills the fixed --thrpCol grid track */
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  grid-column: 1;
  /* Span every row line, so the cell is always exactly as tall as its .schedualRow.
     Overlapping sessions push each other onto extra (implicit) grid rows; without
     this the cell would only cover the first one and end up half the row's height.
     Unused tracks are auto-sized and empty, so they stay 0 high and the row's own
     height is unchanged. */
  grid-row: 1 / span 30;
  height: 100%;
  border: 1px solid var(--border_color);
  border-top: none;
  border-bottom: none;
  background-color: var(--taken_background); /* opaque: sessions scroll underneath */
  background-image: var(--gradientBasic);
  align-items: center;
  font-size: .7em;
  text-align: center;
  line-height: 1;
  /* Pinned while the schedule scrolls horizontally under it.
     The grid track stays where it is, so the slot maths is unaffected. */
  position: sticky;
  inset-inline-start: 0;
  z-index: 60;
  flex-wrap: wrap;
  padding: 1px;
}
.toptothrp{
  height: 30px;
}
.schedThrp .profileIcon{
  max-width: 100%;
  height: auto;
  margin: 0 !important;
}
/* Week schedules (therapist / case): first column holds day name + date, needs more room */
.uniscreen .schedualRow, .uniscreen .schedualRowHead{
  --thrpCol: 72px;
}

.schedThrpHead{
  height: 2px;
  border: none;
}

.schedHeadStart{
  border: none;
}


.schedualRow, .schedualRowHead{
  /*
    Daily schedule grid:
    column 1            = therapist cell (fixed width --thrpCol)
    columns 2 .. 33     = 32 half-hour slots (09:00 -> 00:30), all exactly equal.
    The hour lines (::after) are painted from the same variables, so lines and
    columns always coincide whatever the screen width. JS reads --thrpCol /
    --schedSlots too, so keep them the single source of truth.
  */
  --thrpCol: 36px;
  --schedSlots: 32;
  position: relative;
  display: grid;
  width: 100%;
  margin: 0px;
  font-size: .8em;
  padding: 0px;
  grid-template-columns: var(--thrpCol) repeat(var(--schedSlots), minmax(0, 1fr));
  grid-template-rows:  auto;
  grid-auto-flow: row;
  align-items: stretch;
  justify-items: stretch;
  border-bottom: 1px  solid #b0d2f8;
  column-gap: 0;
  background: #f7ecd1;
}

.schedualRow sesSchedule{
  align-self: end;
}

/* The rows container is a flex item of .flexboxColumn (align-items:start), which
   shrink-wraps it. It must span the full width so the therapist rows are exactly
   as wide as the ruler rows above/below them - otherwise hour lines cannot match. */
.schedcontinerAjax{
  width: 100%;
  align-self: stretch;
  min-width: 0;
  padding: 0;   /* cancel the global div{padding:1.2px} so rows line up with the ruler */
  margin: 0;
  box-sizing: border-box;
}
.schedualRow a{

}

.schedualRowHead{
  /*margin-right: 95px;*/
}

.schedualRow::after {
  /* Half-hour lines: covers only the 32 slot columns (starts after the therapist column),
     so every line falls exactly on a grid track boundary. */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--thrpCol);
  inset-inline-end: 0;
  background: repeating-linear-gradient(
          to right,
          transparent,
          transparent calc(100% / var(--schedSlots) - 1px),
          #ccc calc(100% / var(--schedSlots) - 1px),
          #ccc calc(100% / var(--schedSlots))
  );
  pointer-events: none;
}

.schedualRowVrt, .schedualRowHeadVrt{
  display: grid;
  /*width: 100%;*/
  /*max-height: 70px;*/
  margin: 0px 0px 0px 0px;
  font-size: .8em;
  padding: 0px;
  grid-template-rows: repeat(32,1fr);
  grid-template-columns:  auto;
  grid-auto-rows:1fr;
  grid-auto-flow: row;
  border-bottom: 1px solid var(--border_color);
  gap:1px;
  background: #f7ecd1;

}

.schedualRow:hover{
  background-color: var(--sucess_bcgrnd);
  transition: background-color 1s;
}


.schedualRowHead{
  /* above the pinned .schedThrp cells (z-index 60) so rows scroll under the ruler */
  z-index: 70;
  border: none;
  position: sticky;
  top:0;
}

/*==================================================================*/
/*  Transposed day schedule: columns = therapists, rows = 24 hours   */
/*  One CSS grid:                                                    */
/*    column 1      = the hour scale (sticky)                        */
/*    columns 2..n  = one per therapist                              */
/*    row 1         = therapist header (sticky)                      */
/*    rows 2..49    = the 48 half hours of the day                   */
/*  Sessions are placed by inline grid-column / grid-row from PHP.   */
/*==================================================================*/
.schedVrtWrap{
  overflow: auto;
  max-height: 100vh;
  padding: 0;
  margin: 5px 0 10px 0;
}
/* the transposed grid brings its own scroller, so the usual schedule shell
   must not scroll as well or the page ends up with two nested scrollbars */
.scheduleWrapVrt{
  overflow: visible;
  max-height: none;
}
.scheduleWrapVrt .scheduleContainer{
  min-height: 0;
  padding-top: 0;
  /* the narrow-screen breakpoints pin this to 1200px for the row grid, which
     would make the outer shell scroll sideways as well - the transposed grid
     sizes itself, so let the container follow it */
  width: auto;
}

.schedVrt{
  --timeCol: 46px;
  --headRow: 34px;
  /* taller than a bare label needs, so a half-hour session has room to show
     its service code and photo rather than just a sliver of colour */
  --slotH: 34px;
  /* the narrowest a column can be per overlapping session it needs to show
     side by side - a therapist with no overlap gets exactly one of these,
     one who has two sessions at once gets two, and so on. PHP works out how
     many lanes each column needs and writes the actual grid-template-columns
     as an inline style (below) - this is only the per-lane floor it uses.
     The header carries only the therapist's photo now (name and case name
     are both one hover away), so a column can shrink to just that photo. */
  --thrpLaneMin: 26px;
  position: relative;
  display: grid;
  /* overridden per page by an inline style with one minmax() per therapist,
     sized to that therapist's own busiest overlap - this is only the
     fallback for before that inline style is present (see PHP: --thrpCount) */
  grid-template-columns: var(--timeCol) repeat(var(--thrpCount, 1), minmax(var(--thrpLaneMin), 1fr));
  grid-template-rows: var(--headRow) repeat(48, var(--slotH));
  /* The grid is only as wide as its columns actually need - it does NOT
     stretch to fill the page. PHP writes --thrpLanes (the total number of
     lanes across every therapist), so the natural width is the time scale
     plus one lane's width per lane. That is then held between a 350px floor
     and the width of the screen. */
  width: clamp(350px, calc(var(--timeCol) + var(--thrpLanes, 1) * var(--thrpLaneMin)), 100%);
  min-width: max-content;   /* many therapists -> scroll instead of squashing */
  /* the grid is narrower than the page, so sit it in the middle of it. When
     there are too many therapists to fit, the width above wins and the auto
     margins collapse to zero, so nothing is ever pushed out of reach of the
     scroller. */
  margin: 0 auto;
  padding: 0;
  font-size: .8em;
  background: #f7ecd1;
}

/* --- the hour scale down the side --- */
.schedVrtTime{
  grid-column: 1;
  position: sticky;
  inset-inline-start: 0;
  z-index: 55;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-top: 1px solid var(--border_color);
  border-inline-end: 1px solid var(--border_color);
  background-color: #f2f2f2;
  font-weight: bold;
  line-height: 1;
  /* NB: no `direction` here - the cell must keep the page's direction or
     inset-inline-start would resolve to the left in RTL and the column would
     scroll away instead of staying pinned. The digits get it on the span. */
}
.schedVrtTime span{
  direction: ltr;
  /* sit ON the line it belongs to, like the labels on the horizontal ruler */
  transform: translateY(-50%);
  white-space: nowrap;
  /* the same pill the horizontal ruler's labels wear (.schedHead span) - the
     only difference is that these read across instead of down the page */
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 11pt;
  text-align: center;
  padding: 1px 3px;
  font-size: 0.8em;
  font-weight: bold;
  border: solid lightgray 1px;
  border-radius: 30%;
  background-color: #f2f2f2;
}
/* AM / PM, small enough to ride along beside the digits in a narrow column */
.schedVrtTime span i{
  font-style: normal;
  font-size: .62em;
  font-weight: bold;
  opacity: .75;
}
/* the very first label has no row above it to hang over, so keep it in place */
.schedVrtTime[data-slot="0"] span{
  transform: none;
}
.schedVrtTime.vrtHalf{
  background-color: #eceaea;
}
.schedVrtTime.vrtHalf span{
  background-color: #dfdddd;
}

/* --- one line across the grid per half hour --- */
.schedVrtLane{
  grid-column: 2 / -1;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  pointer-events: none;
  z-index: 0;
}
.schedVrtLane.vrtHalf{
  border-top-style: dotted;
}

/* --- therapist header across the top: just the photo, no name printed - a
   column need only ever be as wide as it. The full name is available on
   hover, from the widget PHP already attaches to this cell. --- */
.schedVrtThrp{
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
  border-inline-end: 1px solid var(--border_color);
  background-color: var(--taken_background);
  background-image: var(--gradientBasic);
}
.schedVrtThrp .profileIcon{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
/* the corner sits above both, so neither scrolls over it */
.schedVrtCorner{
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  inset-inline-start: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  font-size: .7em;
  font-weight: bold;
  text-align: center;
  border-inline-end: 1px solid var(--border_color);
  background-color: var(--taken_background);
  background-image: var(--gradientBasic);
}

/* --- the drop target behind each therapist's sessions --- */
.schedVrtCol{
  grid-row: 2 / -1;
  margin: 0;
  padding: 0;
  border-inline-end: 1px solid var(--border_color);
  z-index: 0;
}
.schedVrtCol:hover{
  background-color: var(--sucess_bcgrnd);
  transition: background-color 1s;
}

/* --- sessions in this grid stretch to their own time span --- */
/* Sessions that overlap in time share the therapist's column: PHP works out how
   many lanes a column needs (--lanes) and which one each session sits in
   (--lane), so concurrent sessions sit side by side instead of on top of
   each other. A column with no overlap is simply 1 lane wide. */
.schedVrt .sesSchedule{
  position: relative;
  z-index: 2;
  height: auto;          /* the grid row span sets the height here */
  min-height: 0;
  padding: 1px;
  /* NB no overflow:hidden - the save bar sits OUTSIDE the box (bottom:100%) and
     would be clipped away. The inner blocks are clipped instead, below. */
  align-self: stretch;
  box-sizing: border-box;
  width: calc(100% / var(--lanes, 1));
  margin: 0;
  margin-inline-start: calc(var(--lane, 0) * 100% / var(--lanes, 1));
}
.schedVrt .sesSchedule .sesCode{
  margin: 0;
}
/* keep a long case name inside its box without clipping the save bar */
.schedVrt .sesSchedule > .sesCode,
.schedVrt .sesSchedule > .sesCaseName{
  max-width: 100%;
  overflow: hidden;
}

/* --- narrow columns: the session reads down the box ----------------------
   Order stays the one the markup gives - service code, photo, case name -
   but the name is turned on its side so a column can be a photo wide. */
.schedVrt .sesSchedule{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;      /* the save bar lives outside the box */
}
.schedVrt .sesSchedule > .sesCode{
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  font-size: .95em;
  line-height: 1.3;
  margin-top: 1px;
}
.schedVrt .sesSchedule > .sesCode > div{
  width: 100%;
  text-align: center;
}
.schedVrt .sesSchedule > .sesCaseName{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* .sesCaseName wraps by default, which in a column turns the photo and the
     name back into two side-by-side columns - they must stay in one */
  flex-wrap: nowrap;
  align-items: center;
  min-height: 0;
  width: 100%;
}
.schedVrt .sesSchedule .sesCaseName .tinyProfileIcon{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  object-fit: cover;
}
/* No case name here: the column is only as wide as the photo, and the name is
   one hover away in the session's own tooltip. Code and photo say enough. */
.schedVrt .sesSchedule .sesCaseNm{
  display: none;
}
/* elsewhere the name is just part of the line, exactly as it was before it
   was given an element of its own */
.sesSchedule .sesCaseNm{
  display: inline;
}

/* --- the half-hour line under the pointer, lying down --------------------
   Same indicator as the horizontal schedule, turned through 90 degrees: it
   runs across the grid at the time being pointed at (or dropped on). */
.hourLineHover.hourLineHoverH{
  width: auto;
  height: 1px;
}
/* The row grid drops from .8em to .7em from this width down (.schedualRow /
   .schedualRowHead); the transposed grid follows the same step, so its time
   labels stay exactly the size of the horizontal ruler's at every width. */
@media screen and (max-width: 1050px){
  .schedVrt{
    font-size: .7em;
  }
}

/* the time label for the pointed-at (green tint) and dropped-on (solid) row */
.schedVrtTime span.timeHover{
  background-color: var(--sucess_bcgrnd);
  box-shadow: 0 0 0 1px rgba(122,252,135,.9);
}
.schedVrtTime span.timeHighlight{
  background-color: rgba(122,252,135,1);
  color: #13400f;
}

.scheduleprint{
  display: none;
}

.draggedses{
  box-shadow: 0px 0px 3px 3px lightgray;
}

.droppedses, .savearea{
  background-color: rgba(122,252,135,1);
}

/* A case in two places at once.
   When a session is dropped on a new time, every OTHER session of the same
   case that overlaps that time is marked with this - wherever it sits in the
   schedule. It is deliberately louder than the excused-session red, which is
   a status rather than a warning, and it clears when the move is saved or
   undone. .sesSchedule.sesClash outranks the status colours on its own, and
   its own animation replaces the "should have ended" pulse so the warning is
   never painted over. */
.sesSchedule.sesClash{
  background-color: rgb(251 250 113 / 0.92);
  background-image: none;
  border: 1px solid rgb(150, 10, 10);
  box-shadow: 0 0 0 2px rgba(241, 50, 50, .45), 0 1px 3px rgba(93, 21, 21, .6);
  animation: sesClashPulse 1.1s ease-in-out 3;
}
.sesSchedule.sesClash .sesCode,
.sesSchedule.sesClash .sesCaseName,
.sesSchedule.sesClash .sesCaseNm{
  color: #5D151599;
}
@keyframes sesClashPulse{
  0%, 100%{ box-shadow: 0 0 0 2px rgba(241, 50, 50, .45), 0 1px 3px rgba(93, 21, 21, .6); }
  50%     { box-shadow: 0 0 0 6px rgba(241, 50, 50, .18), 0 1px 3px rgba(93, 21, 21, .6); }
}

/* The note that pops up beside a session just dropped on a time the same case
   is already booked for. It is placed by the script inside the schedule's own
   positioned box (.scheduleContainer, or .schedVrt in the vertical layout), so
   it travels with the schedule when it is scrolled. It lasts exactly as long
   as the marking on the clashing sessions: the next drop, a save or an undo
   takes it away. pointer-events:none so it can never swallow a drag. */
.sesClashTip{
  position: absolute;
  z-index: 90;            /* over the sticky ruler (70) and therapist column (60) */
  max-width: 190px;
  margin: 0;
  padding: 4px 7px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 170, 0, .85);
  border-inline-start: 3px solid rgb(241, 176, 0);
  border-radius: 4px;
  background-color: #fff8c4;
  color: #5a4b00;
  font-size: .72rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: start;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  pointer-events: none;
  animation: sesClashTipIn .18s ease-out;
}
@keyframes sesClashTipIn{
  from{ opacity: 0; transform: translateY(-3px); }
  to  { opacity: 1; transform: none; }
}


.sesCode{
  z-index: 21;
  display: block;
  font-family: 'Inter var', sans-serif;
  line-height: 0.7;
  font-weight: 750;
  font-size: .8em;
  color: #780d14;
  margin:3px 0 0 0;
  /*color: black;*/

}
/* Save bar: a tab sitting on top of the session it belongs to.
   left/right:0 make it exactly as wide as the session, whatever that width is,
   and bottom:100% puts its lower edge on the session's top edge with no gap.
   Its height is whatever the buttons need - nothing is positioned by script. */
.savearea{
  z-index: 51;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;      /* time + buttons on ONE line: bar is as tall as a button */
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border_color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background-color: rgba(163, 163, 163, 0.85);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
/* nothing shrinks: the script measures the real widths and picks the layout */
.savearea > *{
  flex: 0 0 auto;
}

/* the three buttons: one row when the session is wide enough for them,
   a column when it is not (the script measures and adds .stackedbar) */
.savebtns{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
/* never squeeze the icons to fit a narrow session - the bar stacks instead */
.savebtns > *{
  flex: 0 0 auto;
}
/* inside the bar the flex gap does the spacing, so drop the buttons' own margins */
.savearea .saveBtn, .savearea .saveBtnall, .savearea .undoBtn{
  margin: 0;
}

/* Only when the buttons cannot sit side by side (short sessions) does the bar
   become a column - that is the one case where it is tall. */
.savearea.stackedbar{
  flex-direction: column;
  gap: 1px;
}
.savearea.stackedbar .savebtns{
  flex-direction: column;
}

/* No room above (top rows, or a tall stacked bar): hang it under the session
   instead - still exactly its width and still flush, just on the other edge. */
.savearea.barbelow{
  bottom: auto;
  top: 100%;
  justify-content: flex-start;
  border-top: none;
  border-bottom: 1px solid var(--border_color);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.sugtiming{
  display: none;
  font-size: 0.9em;
  /*margin: 5px 0 0 0;*/
  /*height: 7px;*/
  color: white;
  background-color: #6f6f6f;
  padding: 4px;
  border-radius: 3px;
  line-height: 0.6;
  font-weight: bold;
}

/* The new time is no longer shown on the bar - the ruler label for that time is
   highlighted green instead (see .schedHead span.timeHighlight). */

.schedualRow{
  --start0900am:2; /*Change this number only!*/
  --start0930am:calc(var(--start0900am) + 1);

  --start1000am:calc(var(--start0900am) + 2);
  --start1030am:calc(var(--start0900am) + 3);

  --start1100am:calc(var(--start0900am) + 4);
  --start1130am:calc(var(--start0900am) + 5);

  --start1200pm:calc(var(--start0900am) + 6);
  --start1230pm:calc(var(--start0900am) + 7);

  --start0100pm:calc(var(--start0900am) + 8);
  --start0130pm:calc(var(--start0900am) + 9);

  --start0200pm:calc(var(--start0900am) + 10);
  --start0230pm:calc(var(--start0900am) + 11);

  --start0300pm:calc(var(--start0900am) + 12);
  --start0330pm:calc(var(--start0900am) + 13);

  --start0400pm:calc(var(--start0900am) + 14);
  --start0430pm:calc(var(--start0900am) + 15);

  --start0500pm:calc(var(--start0900am) + 16);
  --start0530pm:calc(var(--start0900am) + 17);

  --start0600pm:calc(var(--start0900am) + 18);
  --start0630pm:calc(var(--start0900am) + 19);

  --start0700pm:calc(var(--start0900am) + 20);
  --start0730pm:calc(var(--start0900am) + 21);

  --start0800pm:calc(var(--start0900am) + 22);
  --start0830pm:calc(var(--start0900am) + 23);

  --start0900pm:calc(var(--start0900am) + 24);
  --start0930pm:calc(var(--start0900am) + 25);

  --start1000pm:calc(var(--start0900am) + 26);
  --start1030pm:calc(var(--start0900am) + 27);

  --start1100pm:calc(var(--start0900am) + 28);
  --start1130pm:calc(var(--start0900am) + 29);

  --start1200am:calc(var(--start0900am) + 30);
  --start1230am:calc(var(--start0900am) + 31);
}

.start0900am{grid-column-start: var(--start0900am);}  .end0900am{grid-column-end:var(--start0900am);}
.start0930am{grid-column-start: var(--start0930am);}  .end0930am{grid-column-end: var(--start0930am);}

.start1000am{grid-column-start: var(--start1000am);}  .end1000am{grid-column-end: var(--start1000am);}
.start1030am{grid-column-start: var(--start1030am);}  .end1030am{grid-column-end: var(--start1030am);}

.start1100am{grid-column-start: var(--start1100am);}  .end1100am{grid-column-end: var(--start1100am);}
.start1130am{grid-column-start: var(--start1130am);}  .end1130am{grid-column-end: var(--start1130am);}

.start1200pm{grid-column-start: var(--start1200pm);}  .end1200pm{grid-column-end: var(--start1200pm);}
.start1230pm{grid-column-start: var(--start1230pm);}  .end1230pm{grid-column-end: var(--start1230pm);}

.start0100pm{grid-column-start: var(--start0100pm);}  .end0100pm{grid-column-end: var(--start0100pm);}
.start0130pm{grid-column-start: var(--start0130pm);}  .end0130pm{grid-column-end: var(--start0130pm);}

.start0200pm{grid-column-start: var(--start0200pm);}  .end0200pm{grid-column-end: var(--start0200pm);}
.start0230pm{grid-column-start: var(--start0230pm);}  .end0230pm{grid-column-end: var(--start0230pm);}

.start0300pm{grid-column-start: var(--start0300pm);}  .end0300pm{grid-column-end: var(--start0300pm);}
.start0330pm{grid-column-start: var(--start0330pm);}  .end0330pm{grid-column-end: var(--start0330pm);}

.start0400pm{grid-column-start: var(--start0400pm);}  .end0400pm{grid-column-end: var(--start0400pm);}
.start0430pm{grid-column-start: var(--start0430pm);}  .end0430pm{grid-column-end: var(--start0430pm);}

.start0500pm{grid-column-start: var(--start0500pm);}  .end0500pm{grid-column-end: var(--start0500pm);}
.start0530pm{grid-column-start: var(--start0530pm);}  .end0530pm{grid-column-end: var(--start0530pm);}

.start0600pm{grid-column-start: var(--start0600pm);}  .end0600pm{grid-column-end:var(--start0600pm);}
.start0630pm{grid-column-start: var(--start0630pm);}  .end0630pm{grid-column-end: var(--start0630pm);}

.start0700pm{grid-column-start: var(--start0700pm);}  .end0700pm{grid-column-end: var(--start0700pm);}
.start0730pm{grid-column-start: var(--start0730pm);}  .end0730pm{grid-column-end: var(--start0730pm);}

.start0800pm{grid-column-start: var(--start0800pm);}  .end0800pm{grid-column-end: var(--start0800pm);}
.start0830pm{grid-column-start: var(--start0830pm);}  .end0830pm{grid-column-end: var(--start0830pm);}

.start0900pm{grid-column-start: var(--start0900pm);}  .end0900pm{grid-column-end: var(--start0900pm);}
.start0930pm{grid-column-start: var(--start0930pm);}  .end0930pm{grid-column-end: var(--start0930pm);}

.start1000pm{grid-column-start: var(--start1000pm);}  .end1000pm{grid-column-end: var(--start1000pm);}
.start1030pm{grid-column-start: var(--start1030pm);}  .end1030pm{grid-column-end: var(--start1030pm);}

.start1100pm{grid-column-start: var(--start1100pm);}  .end1100pm{grid-column-end: var(--start1100pm);}
.start1130pm{grid-column-start: var(--start1130pm);}  .end1130pm{grid-column-end: var(--start1130pm);}

.start1200am{grid-column-start: var(--start1200am);}  .end1200am{grid-column-end: var(--start1200am);}
.start1230am{grid-column-start: var(--start1230am);}  .end1230am{grid-column-end: var(--start1230am);}



.schedSes{
  z-index: 1;
  position: absolute;
  top:3px;
  width:37px;
  height: 60px;
  padding: 3px;
}
.schSesHour{
  width:85px;
}
.schSesHourA30{
  width:133px;
}
.schSes2Hours {
  width: 180px;
}
.verticalRular{
  z-index: 3;
  width:20px;
  background-color: rgba(50, 205, 50, 0.1);
  position: absolute;
  top:33px;
  height:98%;
  border-left: 0.2rem solid limegreen;
  left:20%;
  cursor: pointer;
}
.timeLine{border: 0.2rem solid red;}

.timeLine {
  border: 0.15rem solid lime;
  animation-name: timeLine;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  color:green;
}
@keyframes timeLine {
  0% {
    border: 0.15rem solid lime;
  }
  50% {
    border: 0.15rem solid green;
  }
100 {
  border: 0.15rem solid green;
}
}

.pulsedRedFrame {
  border: 0.15rem solid #fc7a7a;
  animation-name: pulsedRedFrame;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  color: #fc7a7a;
}
@keyframes pulsedRedFrame {
  0% {
    border: 0.15rem solid #fc7a7a;
    color: #fc7a7a;
  }
  50% {
    border: 0.15rem solid #b40202;
    color: #b40202;
  }
100 {
  border: 0.15rem solid #b40202;
  color: #b40202;
}
}

.pulsedBlueBckgrnd {
  background-color: rgba(222, 222, 222, 0.75);
  animation-name: pulsedBlueBckgrnd;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes pulsedBlueBckgrnd {
  0% {
    background-color: rgba(222, 222, 222, 0.75);
  }
  40% {
    background-color: #99e9f9;
  }
100 {
  background-color: #99e9f9;
}
}


.flexibleForm{
  flex-wrap: wrap;
}




#fromtoitems{
  /*display: none;*/
}

#countSrcTitle,#countSrcAuth, #countSrcDetails, #countTpc, #countTpcTitle{
  float:right;
  /*color: #006600;*/
  font-size: 0.6em;
}




.symbol{
  line-height: 0;
  font-weight: bold;
}

.whiteboard{
  font-size: 0.8em;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0px 0px 1px 1px #84acc2;
  padding: 0px;
  margin: 10px 5px 4px 5px;
  max-height: 400px;
  /*overflow: auto;*/
}

.boardheader{
  display: flex;
  flex-flow: row;
  flex-direction: row;
  background-color: var(--taken_background);
  margin: 0px;
  border-radius: 5px 5px 0 0;
}

.boardheader, .boardbody{
  padding: 5px;

}

#backlogs,#donetasks{
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.todocard{
  background-color: #e3e3e3;
  background-color: var(--taken_hover_background);
  box-shadow: 0px 0px 1px 1px rgba(125, 183, 247, 0.75);
  min-height: 30px;
  margin-top: 5px;
  padding: 3px;
  max-height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
  /*box-shadow: 0px 0px 1px 1px #84acc2;*/

}
.todocard:hover{
  background-color: #eeeeee;
}

.assignedTask{
  /*background-color: #B1FCD9FF;*/
  background-color: #abeedd;
  box-shadow: 0px 0px 1px 1px #74E9B2FF;
}

.completedTask{
  background-color: #eeeeee;
  box-shadow: 0px 0px 1px 1px rgba(125, 183, 247, 0.75);
}

.pending{
  background-color: var(--taken_hover_background);
}



.assignedTask:hover{
  background-color: #CFFEE8FF;
}

#assignedtasks{
  max-height: 350px;
  overflow: auto;
}


.buttonicon,.buttonicongray,.closeicon{
  height: 20px;
  width: 20px;
  margin: 2px;
  padding: 0px;
  /*color: var(--font_color_all);*/
  background-color: var(--tab_background);
  border: 1px solid var(--border_color);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.buttonicongray{
  height: 15px;
  width: 15px;
  background-color: #cbcbcb;
  border: 1px solid gray;
  align-self: baseline;
}

.closeicon{
  height: 15px;
  width: 15px;
  background-color: #cdcccc;
  border-radius: 10px;
  margin: 3px;
}

.addSymble,.deleteSymble,.doneSymble,.approveSymble,.approveSymble,.commentSymble,.sendSymble,.closeSymble,.moretimeSymble,pasteSyble{
  background-size: contain;
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center; /* Center the image within the button */
}
.addSymble{
  background-image: url("../img/icons/addbutton.svg");
}

.deleteSymble{
  background-image: url("../img/icons/delete.svg");
}
.editSymble{
  background-image: url("../img/icons/editsquare.svg");
}

.assignSymble{
  background-image: url("../img/icons/assignuser.svg");
}
.commentSymble{
  background-image: url("../img/icons/comment.svg");
}
.sendSymble{
  background-image: url("../img/icons/send.svg");
}
.closeSymble{
  background-image: url("../img/icons/close_small.svg");
}
.doneSymble{
  background-image: url("../img/icons/done.svg");
}

.approveSymble{
  background-image: url("../img/icons/approve.svg");
  color: #d25427;
}
.rejectSymble{
  background-image: url("../img/icons/stop.svg");
  color: #057117;
}

.retreatSymble{
  background-image: url("../img/icons/retreat.svg");
}

.moretimeSymble{
  background-image: url("../img/icons/more_time.svg");
}

.pasteSymble{
  background-image: url("../img/icons/paste.svg");
}

.approvedTask{
  text-decoration: line-through;
  color:gray;
}



.commentsBox{
  display: none;
}
.comments{
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin:0px 20px;
  flex-direction: column-reverse;
}
.commentBody{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: start;
  justify-content: start;
  width: fit-content;
  background-color: #e9e8e8;
  margin-top: 3px;
  border-radius: 20px;
  box-shadow: 0px 0px 1px 1px rgba(188, 190, 190, 0.75);
  /*box-shadow: 0px 0px 1px 1px #84acc2;*/
  font-size: 0.9em;
}

.commentTxt{
  display: flex;
  flex-direction: column;
  padding:0px 5px;
}



/* Text styles ==============================================================*/

.yellowfont,.caseFont {
  color: black;
  /*color: #b76f02;*/
  font-weight: bold;
  font-size: 1em;
}
.caseFont {
  /*color: #b76f02;*/
  font-weight: bold;
  font-size: 0.8em;
}

.redfont {
  color: rgb(205, 1, 1);
}

.darkgrayfont {
  color: #666565;
}


/*Pypal form*/

.pp-HCSGNJA98KAAN{text-align:center;border:none;border-radius:0.25rem;min-width:11.625rem;padding:0 2rem;height:2.625rem;font-weight:bold;background-color:#FFD140;color:#000000;font-family:"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.25rem;cursor:pointer;}


.darkredfont {
  /*font-size: 0.85em;*/
  color: #a82222;
  /*font-weight: bold;*/
}

.lredfont {
  color: #ff7272;
}

.greenfont {
  color: #006600;
  /*font-weight: bold;*/
}

.purplefont {
  color: rebeccapurple;
  font-weight: bold;
}

.bluefont {
  color: darkblue;
  font-weight: bold;
}

.bluelightlink{
  color: #0455de;
  font-weight: bold;
  cursor: pointer;
}


.darkorangefont {
  /*
  font-size: 0.85em;
  */
  color: #b75d02;
  /*
  font-weight: bold;
  */
}
.boldfont{
  font-weight: bold;
}

.medblackfont{
  color: black;
  font-size: 0.95em;
}

.lightgreenfont {
  color: #c9ff93;
}

.greennote{
  color: #c9ff93;
  font-size: 12px;
}

.greenHint, .blueHint, .redHint {
  position:relative;
  width:99%;
  padding: 0px 3px 0px 3px;
  text-align: center;
  font-size: 12px;
  /*border: 1px solid ;*/
  border-radius: 7px;
  margin: 3px 0 0 0;
  box-shadow: 0px 0px 3px 0px rgb(149 148 148 / 0.81);
}
.greenHint {
  color: #006600;
  font-size: 12px;
  border-color: #006600;
  background-color: rgba(150, 255, 159, 0.72);
  box-shadow: 0px 0px  3px 0px rgb(79 198 88 / 0.78);
}
.blueHint {
  color: #01589f;
  font-size: 12px;
  border-color: #01589f;
  background-color: var(--tab_background);

}

.redHint {
  display: flex;
  color: darkred;
  font-size: 12px;
  /*border-color: rgb(251 123 123 / 0.59);*/
  box-shadow: 0px 0px  3px 0px rgb(250 108 108 / 0.81);
  background-color: rgb(253 206 206 / 0.91);
}

.payDueNote{
  padding: 3px;
}

.timingWarn{
  display: none;

}

.smallred{
  color: darkred;
  font-size: 0.8em;
}

.smallgreen{
  color: var(--message_color);
  font-size: 0.8em;
}


.redBorder{
  border: solid 2px red !important;
}
.redBorder:focus{
  border: solid 4px red;
}

#testMsg{
  font-size: 12px;
  color: #9f9f9f;
}

#begin_range,#end_range{
  max-width: 100px;
}

.sexOther, #familyData{
  display: none;
}

.prmtClass{
  background-color: rgba(226, 144, 251, 0.31);
  height: 35px;
  font-size: 0.8em;
  color: #61148a;
  text-align: center;
  align-content: center;
  margin: 0;
  border-right:1px solid  rgba(226, 144, 251, 1);
  border-left:1px solid  rgba(226, 144, 251, 1);
}

.ltAlign{
  text-align: left;
}
.slider{
  width: 60px;
}
.redbckgrnd,.LightRedHighlight {background: rgba(255, 114, 114, 0.4);}
.redbckgrnd:hover, .redHighlight {background: rgba(255, 114, 114, 0.6);}

.yellowbckgrnd{background: rgba(242, 248, 161, 0.4);}
.yellowbckgrnd:hover, .yellowHighLight{background: rgba(241, 248, 148, 0.6);}

.orangebckgrnd{background: rgba(254, 203, 122, 0.4);}
.orangebckgrnd:hover, .orangeHighlight{background: rgba(249, 172, 95, 0.59);}

.greenbckgrnd, .lightGgreenHighlight{background: rgba(161, 248, 165, 0.2);}
.greenbckgrnd:hover, .greenHighlight{background: rgba(161, 248, 165, 0.7);}

.purplebckgrnd{
  background-color: #e7d9ff;
}
svg{
  color: var(--border_color);
}

#liveUsers{

}

.loadingsvg{
  width: 24px;
  height: 24px;
}
.loading{
  display: inline-flex;
  align-content: center;
  justify-content: center;
}

.toggleFirst{
  /* LTR counterpart of the rule in alllightgrayAr.css - without it the
     collapsible section headers rendered as bare text in English:
     no frame, no expand arrow. Arrow sits at the end of the line (right). */
  height: 25px;
  background: url('icons/expandMore.svg') no-repeat 97%;
  background-size: 30px;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  margin: 0 0 3px 0;
}

.profilePic{
  height: 7rem;
  width: 7rem;
  padding: 5px;
  margin: 10px 0 10px 0;
  background-color: #e9e9ea;
  background-image: url("../uploads/profiles/default.png");
  border-radius:50%;
  cursor: pointer;
  transition: background-color 0.5s;
}
.profilePic:hover{
  background-color: white;
}

.profileIcon, .tinyProfileIcon, .largeProfileIcon{
  height: 30px;
  width: 30px;
  background-color: #e9e9ea;
  background-image: url("../uploads/profiles/default.png");
  border: solid 1px lightgray;
  border-radius:50%;

}
.tinyProfileIcon{
  z-index: 19;
  display: inline-block;
  position: relative;
  height: 30px;
  width: 30px;
  cursor: pointer;
  border: solid 1px lightgray;
  margin: 0 4px 0 4px;
}

.profileHover{
  z-index: 75;
  display: none;
  width:100px;
  height:100px;
  position: absolute;
  top: 20px;
  left: 100px;
  padding: 5px;
  background-color: white;
  border: solid 1px gray;
  border-radius:50%;
  box-shadow: 0px 0px 3px 3px lightgray;
  text-align: center;
}
.largeProfileIcon{
  width: 100px;
  height: 100px;
}

.profileHover div{
  padding: 0px 5px;
  margin-top: -2px;
  background-color: white;
  border: solid 1px #ababab;
  border-radius: 10px;
  font-size: 0.5em;
  box-shadow: 0px 0px 3px 3px lightgray;

}

.sesSchedule{
  /* containing block for the .savearea save bar, so the bar sits on the
     session's own top edge instead of the row's */
  position: relative;
  padding: 0px;
  z-index: 2;
  display: block;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  font-size: .8em;
  border-radius: 0;
  box-shadow: 0px 0px 0px 0px lightgray;
  margin: 1px 0px ;
  height:35px;
}
.sesCaseName .tinyProfileIcon{
  height: 20px;
  width: 25px;
}
.sesSchedule span{
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.halfSesSchedule,.oneHourSesSchedule{
  padding: 4px 0 4px 0;
  font-size: .6em;
  height:45px;
}

.halfSesSchedule .sesCode,.oneHourSesSchedule.sesCode{
  font-size: 1em;
}

.halfSesSchedule span, .oneHourSesSchedule span{
  flex-direction: column;
  align-items: center;
  /*writing-mode: tb-rl;*/
}

.halfSesSchedule .sesCaseName .tinyProfileIcon,.oneHourSesSchedule .sesCaseName .tinyProfileIcon{
  width: 20px; height: 15px;
}
.oneHourSesSchedule{
  padding: 0;
  height:35px;
}



.sesCaseName{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;

  z-index: 50;
  line-height: 1;
  /*font-size: 0.9em;*/
}

.blkfnt{
  color:black;
}

.fontBirthday{
  font-size: 1em;
  color: #d701a5;
  margin: 0 0 5px 0;
}

.therapistOfTheMonth,.happyBirthdayWid{
  height: 374px;
  /*background-color: red;*/
  background-repeat: no-repeat;
  background-image: url("../img/backgrounds/therapistofthemonth.svg");
}
.happyBirthdayWid{
  background-image: url("../img/backgrounds/happybirthday.svg");
}
.therapistOfTheMonthProfile{
  display: block;
  width:250px;
  height:250px;
  margin:auto;
  margin-top:87px;
  /*background-color: blue;*/
  box-shadow: 0px 0px 3px 3px lightgray;
  border: solid 4px lightgray;
  border-radius: 50%;
}

.qrcodeImage{
  width: 300px;
  height: 300px;
  margin-right: auto;
  margin-left: auto;
}
.inactiveFont{
  color:gray;
}


.borderHighlight{
  border:2px solid black;
  background-color: #d699e7c4;
  padding: 0 5px 0 5px;
  color: black;
}

.trustedLogos{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  flex-wrap: wrap;
  margin: auto;
}
.imgframe{
  background-color: white;
  /*border: 1px var(--sucess_bcgrnd) solid;*/
  box-shadow: 1px 1px 3px #4b4a4a;
  padding: 2px;
  margin: 3px;
  border-radius: 3px;
}

.nopad{

  padding:0;
  margin: 0;
}
.success{
  background-color: var(--sucess_bcgrnd);
}
.partialSuccess{
  background-color: var(--cancelled_background);
}
.noSuccess{
  background-color: var(--absence_background);
}

.notDone{
  background-color: var(--excuse_background);
}
.taskscontainer{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.taskscontainer div{
  display: flex;
  height: 1.5rem;
  width: 1rem;
  margin: 0;
  padding: 3px;
  justify-content: center;
  align-items: center;
  border-left: 1px silver solid;
}


/*/////////////////////////////////////*/
/*     New Drop down List              */
/*/////////////////////////////////////*/
/*.container {*/
/*  width: 100%;*/
/*  max-width: 500px;*/
/*  background: white;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);*/
/*  padding: 30px;*/
/*}*/

/*h1 {*/
/*  text-align: center;*/
/*  color: #333;*/
/*  margin-bottom: 20px;*/
/*  font-weight: 600;*/
/*}*/

.custom-dropdown,.custom-dropdown-cas {
  position: relative;
  width: 100%;
  margin: 5px 0 25px 0;
  font-size: 0.8em;
}

.dropdown-select, .dropdown-select-cas {
  height: 30px;
  padding: 3px;
  border-radius: 5px;
  background: white;
  border: 1px solid var(--border_color);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.dropdown-select:hover, .dropdown-select-cas:hover {
  border-color: var(--border_color);
}

.dropdown-select.open, .dropdown-select-cas.open {
  border-color: #6a11cb;
  box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
  border-radius: 5px 5px 0 0;
}

.dropdown-select i, .dropdown-select-cas i {
  transition: transform 0.3s ease;
}

.dropdown-select.open i, .dropdown-select-cas.open i {
  transform: rotate(180deg);
}

.dropdown-menu, .dropdown-menu-cas {
  /*font-size: 0.9em;*/
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-radius: 0 0 5px 5px;
  background: white;
  border: 1px solid var(--border_color);
  border-top: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 10;
  max-height: 300px;
  /*overflow-y: auto;*/
  overflow-x: auto;
}

.dropdown-menu.open, .dropdown-menu-cas.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.dropdown-item, .dropdown-item-cas {
  padding: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.dropdown-item span,.dropdown-item-cas span,.selected-text,.selected-text-cas{
  display: flex;
  align-items: center;
}

.dropdown-item:hover,.dropdown-item-cas:hover {
  background: #f0f0f0;
}

.dropdown-item.selected, .dropdown-item-cas.selected {
  background: var(--font_color_all);
  color: white;
}

.dropdown-item i, .dropdown-item-cas i {
  margin-right: 10px;
  color: var(--border_color);
}

.dropdown-item.selected i, .dropdown-item-cas.selected i {
  color: white;
}

.search-box, .search-box-cas {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.search-box input, .search-box-cas input {
  width: 97%;
  padding: 3px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.search-box input:focus, .search-box-cas input:focus {
  border-color: var(--border_color);
}







/*Media Queries*/
/*@media screen and  (min-width: 1080px){*/
/*    .allsite{*/
/*        width: 100%;*/
/*    }*/
/*}*/

/* Responsive code ============================================================================== */
@media screen and (max-width: 1390px) {
  /* reports >> records*/
  .reccasetables {
    display: flex;
    flex-direction: column;
  }
}




/*1300==========================v=======================1300==============1300*/
@media screen and (max-width: 1300px) {
  /*Header*/
  .controlmenu > a > span {display: none; }
  /*.controlmenu > a.adminTab{display: none;}*/
  /* Side bar */
  .sidebar {
    display: none;
  }
  .container {
    grid-template-columns: 100%;
  }

  /*Session recording*/
  .formfield  {
    width: 85%;
  }

  /* Pay list report */
  .singlesceen > .tableheader,
  .singlesceen > .payrw {
    font-size: 0.9em;
  }
  .payrw :nth-child(3),
  .tableheader :nth-child(3) {
    display: none;
  }
  .payrw :nth-child(6),
  .tableheader :nth-child(6) {
    display: none;
  }
  .tableheader {
    grid-template-columns: 39.6% 10% 28% 10% 10%;
  }
  .payrw,
  .payrw:hover {
    grid-template-columns: 39.6% 10% 28% 10% 10%;
  }
  /* case */
  /*.screenmenu .booking {display: none;}*/
  .screenmenu .exabs {display: none;}

  .sesSchedule,.sesSchedule span{
    flex-direction: column;
    align-items: center;
  }

  .fileid{
    display: none;
  }

}





.chart{
  /*width='1600' height='550'*/
  width:1400px;
  height:450px;
}

.chart80{

}








@media screen and (max-width: 1050px) {
  .screen,.regularRecordScreen{
    grid-template-columns: 100%;
  }

  .schedualRow, .schedualRowHead{
    font-size: 0.7em;
  }
  .fileid {
    display: block;
    margin: 0 5px 0 5px;
    max-width: 25%;
    padding-left: 5px;
    color: gray;
    font-size: .8em;
  }

}

/*850================850=================850====================850================850*/
@media screen and (max-width: 850px) {
  /* Header */
  .controlmenu .platform_name {
    font-size: 0.6em;
  }

  /*.screenmenu > a.generalReport{*/
  /*  display: none;*/
  /*}*/
  .user_name {
    font-size: 0.6em;
  }

  /* pay form (affects also case and therapist management)*/
  .discreen {
    display: flex;
    flex-direction: column-reverse;
    justify-items: flex-start;
  }
  .discreen:nth-child(2) {display: none;}

  .discreen #columnLt{order: 2;} .discreen #columnRt{order: 1;}


  /* Pay list report */
  .singlesceen > .tableheader,
  .singlesceen > .payrw {
    font-size: 0.9em;
  }
  .payrw :nth-child(5),
  .tableheader :nth-child(5) {
    display: none;
  }
  .tableheader {
    grid-template-columns: 40.6% 12% 34% 12%;
  }
  .payrw,
  .payrw:hover {
    grid-template-columns: 40.6% 12% 34% 12%;
  }

  .sessions {
    height: 1050px;
  }

   /* users list*/
  .rightscreenrow{height: 40px; font-size: .9rem; font-weight:bold; align-content: center;}

  .userrow{display:flex; height: 40px; font-size: .9rem; font-weight:bold; align-content: center; align-items: center;}

  .fileid {
    /*display: none;*/
  }

/*  Therapist sessions*/
  .thrpcont{ display: flex; flex-direction: column; }
  .thrpcont .exccont{display: none;}
  /*.ltcont {max-height: 220px;*/
  /*  !*overflow: auto;*!*/
  /*  !*box-shadow: inset 0px 0px 3px 0px black;*!*/
  /*}*/

/*  report >> pay status*/
  .gridrow5050{
    /*box-shadow: inset 0px 0px 3px 0px black;*/

  }

  .scheduleContainer{
    width: 1200px;
  }

  .schedualRow, .schedualRowHead{
    font-size: 0.7em;
  }

  .buttom1 {
    font-size: 1.1em;
  }
  label,.tabcontent{
    font-size: 1.2em;
  }
  .schedualRowHead{

  }
  .schedualRow, .schedualRowHead{
    --thrpCol: 2rem;
  }

  .schedThrp a{
    /*display: none;*/
  }
  .schedHead span{
    display: flex;
    height:28px;
    width:10px;
    justify-content: center;
    align-content: center;
    align-items: center;
  }


}


/*670================670=====================670==================670================670*/
@media screen and (max-width: 670px) {
  /* Header */

  .platform_name {
    font-size: 0.6em;
  }
  .controlmenu .platform_name {
    font-size: 0.4em;
    padding: 0;
  }
  .user_name {
    margin: 0px 2px;
  }
  .controlmenu > a > img {
    margin: auto;
  }
  .screenmenu > a {
    font-size: 0.5em;
    font-weight: bold;
    width: 80px;
    margin: 3px 5px 0 0;
  }

  /* Records report*/
  .datatr:nth-child(4) {
    display: none;
  }
  .datatr {
    grid-template-columns: 8% 30% 10% 10% 35% 10%;
  }

  /* Pay list report */
  .singlesceen > .tableheader,
  .singlesceen > .payrw {
    font-size: 0.9em;
  }
  .tableheader {
    grid-template-columns: 55.6% 21% 17%;
  }
  .payrw :nth-child(4),
  .tableheader :nth-child(4) {
    display: none;
  }
  .payrw,
  .payrw:hover {
    grid-template-columns: 55.6% 21% 17%;
  }
  .screen, .singlesceen{font-size: .8em;}

  .pconly{display: none;}


.formcontainer, .containerB {
    font-size: .7em;
    line-height: .9em;
  }


  .toggleFirst{
    display: flex;
    justify-content: center;
    height: 25px;
    background: url('icons/expandMore.svg') no-repeat 97%;
    background-size: 30px;
    border: 1px solid var(--border_color);
    border-radius:5px;
    margin:0 0 3px 0;
  }

  .discreenAdmin {
    grid-template-columns: 100%;
    width:100%;
  }

  .schedualRow, .schedualRowHead{
    font-size: 0.7em;
  }

  .login_form {
    width: 90%;
  }


  .scheduleContainer{
    /*min-width: 1000px;*/
  }


  .halfSesSchedule .sesCaseName .tinyProfileIcon,.oneHourSesSchedule .sesCaseName .tinyProfileIcon{
    width: 10px; height: 10px;
  }


}




/*460===============460==================460===================460================460*/

@media screen and (max-width: 460px) {

  table {
    font-size: 0.9em;
  }
  .liveUsers {
    height: 15px;
    min-width: 15px;
    font-size: 0.6em;
    padding: 3px;
  }
.tttfont{
  font-size: 1.1em ;
  font-weight: normal;
  line-height: 1.5em;
}
  /*Session recording*/
  .formfield {
    width: 85%;
  }

  .formfield, .formfieldass {
    left: 1.2rem;
    right: 35rem;
  }

  /*  report >> pay status*/
  .gridrow5050 {
    font-size: .8em;
  }



  .inlineform {
    /*flex-direction: column;*/
  }

  /*.session,.sessionexcuse,.sessionabsence,.sessioncancell,.sessiont{font-size:0.7em;}*/
  .charts {
    flex-direction: column;
  }

  .pconly {
    display: none;
  }


  .schedualRow, .schedualRowHead {
    font-size: 0.7em;
  }


  .scheduleContainer {
    /*min-width: 800px;*/
  }

  .iconLarge {
    width: 18px;
    height: 18px;
  }

  .edit, .del, .cpy{
    display: flex;
    height: 20px;
    width: 20px;
    border:none;
    background-color: transparent;
  }

  .tttTaskForm{
    grid-template-columns: 75% 22%;
  }

  .txtbx,.txtboxnum{
    width:85%;
  }
  .startendgrid{
    column-gap: 0;
    justify-items: center;
  }

  .taskscontainer div{
    display: flex;
    height: 1.5rem;
    width: .3rem;
    margin: 0;
    padding: 3px;
  }

  .tpc{
    width:330px;
  }

  .imgLink{
    height: 18px;
    width: 18px;
    /*padding: 2px;*/
  }

  .screencontainer{
    min-height: 50vh;
  }

  .tinytxt {
    width: 35px;
    height:20px;
    padding: 0 0 0 2px;
  }

  .tab input[type="button"] {
    padding: 3px 5px;
  }

  .savebtns{
    gap:10px;
  }

  .savebtns > * {
    height: 2em;
    width: 2em;
    padding: 2px;

  }


}


/*370===============370==================370===================370================370*/
  @media screen and (max-width: 370px) {

  #logo > img{
    width: 30px;
    height: 30px;
  }
    .platform_name {
      font-size: 0.4em;
    }

  .controlmenu{
    padding: 0px;
  }
  .liveUsers{
    display: none;
  }
  #logout img{
    width: 30px;
  }
  .datawid{
    min-width: 300px;
  }

  .tinytxt {
    width: 30px;
    height:20px;
  }


}

/*2400===============2400==================2400===================2400================2400*/
  @media screen and (min-width: 2400px) {

.allsite{
  font-weight: bold;
  font-size: 45px;
}
    .schedHead span,.halfH{
      /*top:-1em;*/
      min-width: 20%;
      height: 3em;
      font-size: 1.1em;
      line-height: 1.5em;
      padding: 0;

    }
    .schedHead .halfH{
      font-size: 1.1em;
    }

.txtbx,.txtbx1,.txtboxnum,.redHint,.greenHint,.buttomsmall, .buttom1, .buttmMedium {
  height: 60px;
  font-weight: bold;
  font-size: 25px;
}

.buttomMedium{
  min-width: 20px;
}


    .savearea{
      /*background-color:#e6dbb9;*/
      height: 1.7em;
      bottom: -1.7em;
    }


.sugtiming{
  font-size: 1.7em;
}
.saveBtn,.saveBtnall{

}

    .icon15{
      height: 1.7em;
      width: 1.7em;
    }
    .icon24{
      height: 2em;
      width: 2em;
    }

    .toptothrp{
      height: 4em;
    }




  }