/* 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,100);
  --message_color: #962901;
  --sucess_border: green;
  --sucess_bcgrnd: rgba(190, 241, 190, 0.50);
  --close_color: #dedee0;
  /* Font color */
  --font_color_all: #014b96;

  /* 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: rgba(241, 50, 50, 0.08);

  --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%);
}

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

body {
  direction: ltr;
  /*min-width:440px;*/
  padding: 3px;
  background-color: var(--body_background);
  color: var(--font_color_all);
  line-height:20pt;
  font-family: Cairo-VariableFont, sans-serif;
  font-size: 22px;
  /*text-align: left;*/
}
.topHeader{
  display:flex;
  justify-content:stretch;

}
.controlmenu {
  display: flex;
  align-items: center;
  width: 100%;
}

.liveUsers,.liveUsers:hover{
  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;
}

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

.controlmenu > a {
  font-size: 1.2em;
  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;
  width: 40px;
}

.logoarea{
  max-width:200px;
}

.user_name {
  margin: 0px;
  font-size: .8em;
  width: 15%;
  padding: 0px;
}

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

div {
  padding: 1.2px;
}
a {
  color: var(--font_color_all);
  text-decoration: none;
}

ul {
  padding: 0;
  margin: 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 5px 0;
}

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

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

form {
  display: block;
  position: relative;
}

fieldset, .scheduleContainer {
  display: block;
  border-color: var(--border_color);
  border-width: 1px;
  border-radius: 7px;
  margin:7px 3px 5px 3px;
  /*width: auto;*/
}






legend {
  font-weight: inherit;
}

label {
  color: #5f5f5f;
  padding: 5px;
  margin: 5px 0 0px 0;
  font-size:0.9em;
  line-height:1.6em;
}


input[type="time"] {
  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;
}

.txtbx, .txtbx1, .txtboxnum,.txtLong, .tinytxt, .txtarea, .txtboxDate,.mediumtxt,.searchtxtbx,
.frmGrp1txt2btnMax input[type="text"]{
  width: 100%;
  background: white;
  border: thin solid var(--border_color);
  padding: 0 3px 0 3px;
  height: 40px;
}

.txtLong{
width:100%;
}

.txtbxRed {
  width: 98%;
  border: 2px solid red;
  height: 40px;
  margin-top: 3px;
}

.txtarea {
  min-height: 70px;
  resize: vertical;
}

.txtbx1 {
  /*width: 500px;*/
}

.txtboxnum {
  width: 132px;
}

.txtboxDate {
  width: 300px;
}

.tinytxt {
  width: 50px;
}

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

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

.searchtxtbx{
  background:white url("../img/icons/searchg.svg") no-repeat 6px 7px;
  background-size:30px 25px;
  padding: 0 3px 0 40px;
}

#randPass{
  background: var(--site_background);
  text-align:center;
  height:30px;
  border: 1px  solid gray;
}

.buttomsmall, .buttom1, .deleteButton,.editButton,.printButton, .reportButton,.searchButton,.btnxt, .btnprv,
.frmGrp1txt2btnMax input[type="button"]{
  font-size: 1em;
  min-width: 50px;
  padding: 0 10px 0 5px;
  height: 35px;
  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: 96%;
  height: 35px;
}

.buttom1:hover, .buttomsmall:hover, .deleteButton:hover,.editButton:hover,.printButton:hover,.btnxt:hover,
.reportButton:hover,.searchButton:hover,.frmGrp1txt2btnMax input[type="button"]:hover,.btnprv:hover,
.buttom1:disabled, .buttomsmall:disabled {
  background-color: var(--tab_hover_background);
  transition: 0.6s;
}

.buttom1:active, .buttomsmall:active, .deleteButton:active,.editButton:active,
.printButton:active, .reportButton:active,.btnxt:active,.btnprv:active,
.frmGrp1txt2btnMax input[type="button"]:active{
  background-color: var(--cancelled_background);
}

.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);
}

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

.deleteButton {background-image: url("../img/icons/bin-2.png");}
.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"); }
.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");}

.btnxt, .btnprv{
  background-size: 20px 20px;
  border-radius:30px;
  background-color: #edebeb;
}

.deleteButton, .editButton,.printButton,.reportButton,.searchButton,.btnxt,.btnprv{
  z-index: 1;
  min-height: 30px;
  min-width:35px;
  background-size: 20px 20px;
  background-position: 9px;
  background-repeat: no-repeat;
  padding:0px;
  text-align: center;
}



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

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




.frmGrp1txt2btnMax >*:nth-child(1){
  border-radius: 0px 5px 5px 0px;
}
.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: 5px 0px 0px 5px;
}

.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: 5px;
  font-weight: bold;
}


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

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;*/
}

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

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

.tableWrap, .tableWrapWid {
  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%;
}
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{
}






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

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

.login_form {
  margin: auto;
  width: 400px;
  height: auto;
}

.smallform {
}

.smallform > form {
}

.allsite {
  /*width:1450px;*/
  /*width: 100%;*/
  height: auto;
  margin-top: 3px;
  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;
}

.container {

}

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

.controlmenu > a:hover {
  background: var(--tab_hover_background);
}
/*==================================( Widget )===============================*/


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

.datawid{
  min-width:350px;
  max-width:600px;
  max-height: 400px;
  margin: 3px;
  border: 1px solid var(--border_color);
  border-radius:7px;
  font-size:0.8em;
}

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

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

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

.tableWrapWid {
  max-height: 200px;

}



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

/*==================================( 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;
}
.formcontainer {
  max-width:800px;
  margin-left: auto;
  margin-right: auto;
}

.screencontainer > * {
  margin-bottom: 5px;
}
.screen, .regularRecordScreen {
  display: grid;
  grid-template-columns: 25% 75%;
  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;
}

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

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

.snglecont {
  max-height: 650px;
}


.tttTaskForm{
  display: grid;
  grid-template-columns: 75% 15% 10%;
  align-items: center;
}

.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: 1.1em;
  display: flex;
  width: 180px;
  height: 40px;
  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);
}
.smallmenu > a {
  font-size: .9em;
  display: flex;
  flex-direction: row;
  width: 150px;
  height: 40px;
  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);
}

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

.formcover {
  z-index: 3;
  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: 3;
  width: 30%;
  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%;
}
.formfield fieldset{
}

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

}

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

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



.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;
}

.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);
  border-left: var(--border_color);
  border-right: var(--border_color);
}

.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%;
  align-content: center;
}

.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: grid;
  grid-template-columns: 75% 15% 10%;
  width: 100%;
  border-bottom: 1px solid var(--border_color);
}

.rightscreenrow:hover {
  display: grid;
  grid-template-columns: 75% 15% 10%;
  width: 100%;
  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: grid;
  grid-template-columns: 60% 15% 13% 12%;
  width: 100%;
  border-bottom: 1px solid var(--border_color);
  border-top: 1px solid var(--border_color);
  background: var(--tab_hover_background);
}
.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 > 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: 2px;
  border-radius: 3px;
  cursor: pointer;
}

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

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


/*.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{
  cursor: pointer;
  color: var(--font_color_all);
}

.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;
  }
}

.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;
}

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

.notDone{
  background-color: var(--excuse_background);
}

/* Border classes */

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

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

.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-around;
  align-items: center;
  flex-wrap: wrap;
  width:100%;
}

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

.flexboxRow, .flexboxColumn {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexItem{
  margin:0 2% 0 0;
}


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

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

.btns {
  display: flex;
}

.startendgrid {
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 8px;
}

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

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

.thrpcont {
  display: grid;
  grid-template-columns: 80% 20%;
  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;
}
.username {
  max-width:75%;
  text-wrap: normal;
  /*text-align:left;*/
}




.sessions {
  display: block;
  border-right: medium;
  overflow-x: hidden;
  overflow-y: auto;
  height: 720px;
  width:100%;
}
.today_payments{display: block;}
.session, .schedSes {
  background: rgba(222, 222, 222, 0.75);
  border: 1px solid var(--border_color);
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px #4b4a4a;
  margin-bottom: 5px;
  padding: 5px;
  transition: background-color 0.5s;
}



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

.sessiontaken {
  background: var(--taken_background);
  border: 1px solid var(--border_color);
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px 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: 1px 1px 1px 1px 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: 1px 1px 1px 1px #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: 1px 1px 1px 1px #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;
}


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

.scheduleSes{
  text-align: center;
}

.schedHour{
  border-left: none;
  width: 90px;
}
.schedHead{
  position: relative;
  height: 20px;
  border: 1px solid var(--border_color);
  margin: 0px;
}
.schedHead span{
  width: 50%;
  position: absolute;
  right: 75%;
  top:-5px;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  text-align: center;
  background-color: white;
  z-index: 1;
}
.schedHalf{
  position:relative;
  margin: 2px 0 2px 0;
  /*height: 50px;*/
}
.schedThrp, .schedThrpHead{
  display: flex;
  width:7em;
  height: 100%;
  border: 1px solid var(--border_color);
  border-top: none;
  border-bottom: none;
  font-size: 1vw;
  background-image: var(--gradientBasic);
  justify-content: center;
  align-items: center;
  font-size: 1em;
  text-align: center;
  padding: 0 3px 0 px;
}
.schedThrpHead{
  height: 2px;
}


.schedualRow, .schedualRowHead{
  display: grid;
  width: 100%;
  /*max-height: 70px;*/
  margin: 0px 0px 0px 0px;
  font-size: .8em;
  padding: 0px;
  grid-template-columns: 1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr
                         1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr
                         1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr  1fr;
  grid-template-rows:  auto;
  grid-auto-columns:1fr;
  grid-auto-flow: row;
  border-bottom: 1px solid var(--border_color);
  gap:2px;
  background: linear-gradient(90deg, #eee 1%, transparent 1%) 1px 0, #fff;
}
.schedualRow:hover{
  background-color: var(--sucess_bcgrnd);
  transition: background-color 1s;
}


.schedualRowHead{
  z-index: 4;
  gap:0px;
  border: none;
}

.start0900am{grid-column-start: 2;}  .end0900am{grid-column-end: 2;}
.start0930am{grid-column-start: 3;}  .end0930am{grid-column-end: 3;}

.start1000am{grid-column-start: 4;}  .end1000am{grid-column-end: 4;}
.start1030am{grid-column-start: 5;}  .end1030am{grid-column-end: 5;}

.start1100am{grid-column-start: 6;}  .end1100am{grid-column-end: 6;}
.start1130am{grid-column-start: 7;}  .end1130am{grid-column-end: 7;}

.start1200pm{grid-column-start: 8;}  .end1200pm{grid-column-end: 8;}
.start1230pm{grid-column-start: 9;}  .end1230pm{grid-column-end: 9;}

.start0100pm{grid-column-start: 10;}  .end0100pm{grid-column-end: 10;}
.start0130pm{grid-column-start: 11;}  .end0130pm{grid-column-end: 11;}

.start0200pm{grid-column-start: 12;}  .end0200pm{grid-column-end: 12;}
.start0230pm{grid-column-start: 13;}  .end0230pm{grid-column-end: 13;}

.start0300pm{grid-column-start: 14;}  .end0300pm{grid-column-end: 14;}
.start0330pm{grid-column-start: 15;}  .end0330pm{grid-column-end: 15;}

.start0400pm{grid-column-start: 16;}  .end0400pm{grid-column-end: 16;}
.start0430pm{grid-column-start: 17;}  .end0430pm{grid-column-end: 17;}

.start0500pm{grid-column-start: 18;}  .end0500pm{grid-column-end: 18;}
.start0530pm{grid-column-start: 19;}  .end0530pm{grid-column-end: 19;}

.start0600pm{grid-column-start: 20;}  .end0600pm{grid-column-end:20;}
.start0630pm{grid-column-start: 21;}  .end0630pm{grid-column-end: 21;}

.start0700pm{grid-column-start: 22;}  .end0700pm{grid-column-end: 22;}
.start0730pm{grid-column-start: 23;}  .end0730pm{grid-column-end: 23;}

.start0800pm{grid-column-start: 24;}  .end0800pm{grid-column-end: 24;}
.start0830pm{grid-column-start: 25;}  .end0830pm{grid-column-end: 25;}

.start0900pm{grid-column-start: 26;}  .end0900pm{grid-column-end: 26;}
.start0930pm{grid-column-start: 27;}  .end0930pm{grid-column-end: 27;}

.start1000pm{grid-column-start: 28;}  .end1000pm{grid-column-end: 28;}
.start1030pm{grid-column-start: 29;}  .end1030pm{grid-column-end: 29;}

.start1100pm{grid-column-start: 30;}  .end1100pm{grid-column-end: 30;}
.start1130pm{grid-column-start: 31;}  .end1130pm{grid-column-end: 31;}

.start1200am{grid-column-start: 32;}  .end1200am{grid-column-end: 32;}
.start1230am{grid-column-start: 33;}  .end1230am{grid-column-end: 33;}



.schedSes{
  z-index: 1;
  position: absolute;
  top:3px;
  width:37px;
  height: 60px;
  padding: 3px;
}
.schSesHour{
  width:85px;
}
.schSesHourA30{
  width:133px;
}
.schSes2Hours {
  width: 182px;
}
.verticalRular{
  z-index: 1;
  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;
}
}


.flexibleForm{
  flex-wrap: wrap;
}

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

.yellowfont {
  color: #b76f02;
  font-weight: bold;
}

.redfont {
  color: #ff7272;
}



.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;
}

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

.lightgreenfont {
  color: #c9ff93;
}

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

.redBorder{
  border: solid 2px red;
}

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

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

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

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


svg{
  color: var(--border_color);
}

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

.profilePic{
  height: 10rem;
  width: 10rem;
  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{
  height: 36px;
  width: 36px;
  background-color: #e9e9ea;
  background-image: url("../uploads/profiles/default.png");
  border-radius:50%;
}

/*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: 80%;
  }

  /* 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;}

  /*Users lists*/

}





.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.6em;
  }
}

/*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;*/

  }

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

}


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

  .platform_name {
    font-size: 0.6em;
  }
  .controlmenu .platform_name {
    font-size: 0.5em;
    padding: 0;
  }
  .user_name {
    margin: 0px 2px;
  }
  .controlmenu > a > img {
    margin: auto;
  }
  .screenmenu > a {
    font-size: 0.6em;
    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{
    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.45em;
  }



}




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

@media screen and (max-width: 460px) {
  .liveUsers{
    height:15px;
    min-width:15px;
    font-size: 0.6em;
    padding:3px;
  }
  /*Session recording*/
  .formfield  {
    width: 90%;
  }

/*  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.25em;
  }



}