html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}

#thg-calendar {
   font-size: 15px;
}

#thg-calendar button {
   font-size: 0.8em;
}

#div-cal-menu-left {
   left: 0px;
   width: 270px;
   position: absolute;
   padding: 10px 10px;
   overflow-x: hidden;
   overflow-y: visible;
}

#div-res-menu-left {
   left: 0px;
   width: 270px;
   position: absolute;
   padding: 10px 10px;
   overflow-x: hidden;
   overflow-y: visible;
}

#div-adm-menu-left {
   /*left: -300px;*/
   width: 250px;
   position: absolute;
   padding: 10px 10px;
   overflow-x: hidden;
   overflow-y: visible;
}

.tab-adm {
   left: 310px;
   position: absolute;
   display: none;
}


#div-set-menu-left {
   width: 250px;
   position: absolute;
   padding: 10px 10px;
   overflow-x: hidden;
   overflow-y: visible;
}

.tab-set {
   left: 310px;
   position: absolute;
   display: none;
}

#div-fil-menu-left {
   /*width: 250px;*/
   position: absolute;
   padding: 10px 10px;
   overflow-x: hidden;
   overflow-y: visible;
}

.tab-fil {
   left: 310px;
   position: absolute;
}


#div-cal-main {
   left: 295px;
   padding-top: 10px;
   position: absolute;
}

#div-res-main {
   left: 295px;
   padding-top: 10px;
   position: absolute;
}


.mod-classes {
   font-size: 0.8em;
}

.cal-tab {
   border-width: 2px;
}

.cal-header {
   font-size: 0.8em;
   position: relative;
   text-align: center;
   margin-bottom: 20px;
}

.cal-header-sub {
   margin-top: 30px;
   padding: 5px;
}

.cal-header .cal-btn-prev {
   margin: 2px;
}

.cal-header .cal-btn-next {
   margin: 2px;
}

.cal-main .cal-week {
   padding-right: 10px;
}

.cal-main .cal-week {
   font-weight: bold;
}

.tbl-calendar {
   border-spacing: 0px;
}


div.cal-size-s {
   font-size: 0.6em;
}

div.cal-size-m {
   font-size: 0.65em;
}

div.cal-size-l {
   font-size: 0.7em;
}

.cal-main .cal-week-size-m  {
   min-width: 12px;
}

.cal-main .cal-week-size-m  {
   min-width: 16px;
}

.cal-main .cal-week-size-l  {
   min-width: 20px;
}

#div-cal-menu-left .btn-small { font-size: 0.6em; }

.cal-day {
   border: 1px solid #C5DBEC;
   padding: 0px;
   vertical-align:top;
   width: 100px;
}

.cal-day:hover {
   border: 2px solid red;
   background-color: #ffffcc;

}

div.cal-day-dd-hover {
   background-color: #ffffcc;
}

.cal-day-empty {
   background-color: transparent;
   border: 0px;
}

.cal-day .cal-day-header {
   color: #888888;
   text-align: center;
   text-decoration: none;
   margin: 0px 40%;
   font-weight: bold;
   border-radius: 4px;
}

.cal-day .today {
   background-color: #ff0000;
   color: #000000;
}

.cal-day-holiday {
   background-color: #D1FBFF;
   /*color: #888888;*/
}

.cal-day-weekend {
   background-color: #B5FFF6;
}

.cal-label-left {
   margin-right: 20px;
}

.cbx-classes .ui-button-text {
   padding: 2px 2px;
}


.link-new-app {
   cursor: pointer;
   text-decoration: none;
   color: #2E6E9E;
   font-weight: bold;
   /*font-size: 0.9em;*/
}

a.link-import, a.link-res-iter, a.link-admin {
   text-decoration: none;
   color: #2E6E9E;
   font-weight: bold;
   font-size: 0.9em;
}

a {
   text-decoration: none;
}

.cal-app { border-radius: 4px; }

.cal-app-content { position: absolute; overflow: hidden; white-space: nowrap; }

.cal-app-grip.editable:hover { background-color: #ffaaaa; }

.cal-app-grip { position: absolute; margin: 0px 0px; width:13px; height:95%; background-image:url(icons/grip-dotted.png); background-repeat:repeat-y; background-position: 5px 2px; }

.cal-app-grip-left  { left:  0px; border-radius: 4px 0px 0px 4px; }
.cal-app-grip-right { right: 0px; border-radius: 0px 4px 4px 0px; }




.month-header   { text-align:center; font-weight: bold; font-size: 1.5em; letter-spacing: 0.3em; text-transform: uppercase; }
.weekday-header { text-align:center; font-weight: bold; }

div.cal-size-s .cal-app {  }
div.cal-size-m .cal-app {  }
div.cal-size-l .cal-app {  }

.res-bar { overflow: hidden; white-space: nowrap; background-color: white; border-radius: 4px; background-color: #FFFFE6; cursor: pointer; }

div.cal-size-s .res-bar { position: absolute; font-size: 7px;  }
div.cal-size-m .res-bar { position: absolute; font-size: 10px;  }
div.cal-size-l .res-bar { position: absolute; font-size: 13px;  }


.app-class {
   color: #ff0000;
   font-weight: bold;
}

.app-title {
   font-weight: bold;
}

.app-note {
   margin-top: 10px;
   color: #444444;

}

.app-user {
   color: #0000FF;
   cursor: default;
}

.cal-app-multiday {
   /*background-color: #FFCE6D;*/
}

/*
.cal-app-holiday {
   background-color: #82B7B0;
   color: #ffffff;
}

.cal-app-test {
   background-color: #FFEDC4;
   color: #ffffff;
}

.cal-app-varia {
   background-color: #D7FFC6;
   color: #ffffff;
}

.cal-app-teachers {
   background-color: #C9ECFF;
   color: #ffffff;
}

.cal-app-excoursion {
   background-color: #ECCCFF;
   color: #ffffff;
}

.cal-app-private {
   background-color: #00EDFF;
   color: #ffffff;
}
*/


.cal-input-error {
   margin: 0px;
   padding: 0px;
   color: red;
   font-size: 0.8em;
}

.res-main table { border-collapse: collapse; margin: 20px 0px; font-size: 0.9em; }
.res-user-short { background-color: #ffbb00; border-radius: 3px; padding: 0px 4px; }
.res-user-short.has-note { text-decoration: underline; }
td.reservation { border: 1px solid #aaaaaa; width: 35px; height: 15px; text-align: center; margin: 0px; font-size: 0.8em; cursor: pointer; }
td.main-hour   { border: 2px solid #777777; }
td.res-name    { padding-right: 10px; min-width: 200px; }

div.ed-note { min-width:700px; min-height:300px; }
div.ed-note-sens { min-width:700px; min-height:300px; }
div.ed-note-public { min-width:700px; min-height:300px; }


/*.calendar-content .ui-selected { background: #F39814; color: white; }*/

div.named-box { position: relative; }
div.named-box > div.content { margin-bottom: 20px; position: relative; border: 2px solid #A6C9E2; border-radius: 5px; }
div.named-box > div.label { position: absolute; left: 20px; top: -8px; padding: 1px 5px 1px 0px; /*background-color: #ffffff;*/ color: #A6C9E2; font-size: 14px; font-weight: bold; cursor: pointer; white-space: nowrap; }
div.named-box > div.label > span.label-icon { float:left; }
div.named-box > div.content > div.container { padding: 15px 10px 10px 10px; }

.select-date { width: 100px; }
.select-res  { width: 100%; }

div.center-h { margin-left: auto; margin-right: auto; }

#tab-resources .content table { margin-bottom: 30px; }
#tab-resources .content th { font-size: 0.8em; }

p {
   -webkit-margin-before: 5px;
   -webkit-margin-after: 0px;
   margin-top: 5px;
   margin-bottom: 0px;
}

.ui-dialog-titlebar {
   border: 0px;
   background: none;
   color: #96B7CC;

}

.ui-dialog-titlebar .ui-dialog-titlebar-close {
   background: none;
   border: none;
}

.ui-dialog {
   border-width: 2px;
}

.notice-content {
   border: 2px solid #ff6a00;
   border-radius: 5px;
   padding: 10px;
   margin: 10px 0px;
}



.ui-tooltip, .arrow:after {
   background: white;
   border: 2px solid #555555;
}

.ui-tooltip {
   padding: 5px 10px;
   /*color: white;*/
   border-radius: 10px;
   /*font: bold 14px "Helvetica Neue", Sans-Serif;*/
   /*text-transform: uppercase;*/
   box-shadow: 0 0 3px black;
}

.arrow {
   width: 70px;
   height: 16px;
   overflow: hidden;
   position: absolute;
   left: 50%;
   margin-left: -35px;
   bottom: -16px;
}

.arrow.top {
   top: -16px;
   bottom: auto;
}

.arrow.left {
   left: 20%;
}

.arrow:after {
   content: "";
   position: absolute;
   left: 20px;
   top: -20px;
   width: 25px;
   height: 25px;
   box-shadow: 6px 5px 9px -9px black;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.arrow.top:after {
   bottom: -20px;
   top: auto;
}

.ui-tabs-vertical { /*width: 55em;*/ }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; font-size: 0.7em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

h4 {
   padding: 0px;
   margin: 0px 0px 10px 5px;
   font-weight: bold;
   font-size: 1.1em;
}

table.list { font-size: 0.9em; }

table.list th {
   background: none repeat scroll 0 0 #D3DCE3;
   padding: 0px 4px;
   color: #000000;
   font-weight: bold;
}

table.list.tr { text-align: left; }
table.list tr.odd { background: none repeat scroll 0 0 #F5F5F5; }
table.list tr.even { background: none repeat scroll 0 0 #EFEFEF; }
table.list td { padding: 0px 4px; }

img.action { padding: 2px; }

div#loading-small {
    display:    none;
    width:      16px;
    height:     16px;
    position:   fixed;
    left: 0px;
    top: 0px;
    z-index:    1000;
    background: rgba( 255, 255, 255, .8 )
                url('icons/loading-small.gif')
                50% 50%
                no-repeat;
}

#loading-modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8)
                url('icons/loading-big.gif')
                50% 50%
                no-repeat;
}

body.loading {
    overflow: hidden;
}

body.loading #loading-modal {
    display: block;
}

textarea.editing { font-size: 0.9em; }

img.action { cursor: pointer; }

.menu-list li[href] {
   cursor: pointer;

}

.ui-checkbox {
    font-size: 0.75em;
    margin: 0.3em;
}

#thg-calendar .only-my button {
   font-size: 0.6em;
}

.prevent-selection {
   -moz-user-select:    none;
   -o-user-select:      none;
   -khtml-user-select:  none;
   -webkit-user-select: none;
   -ms-user-select:     none;
   user-select:         none;
}

#thg-calendar .filter-app-type button {
   background-color: #82B7B0;
   background-image: none;
   font-size: 0.6em;
}

ul.section-links .logout-button {
   background-image: url(icons/logout.png);
   width: 30px;
   height: 28px;
}

.ui-icon.resource-status-ok {
   background: url("icons/circle_green.png") 0 0 no-repeat;
}

.ui-icon.resource-status-part-usable {
   background: url("icons/circle_orange.png") 0 0 no-repeat;
}

.ui-icon.resource-status-not-usable {
   background: url("icons/circle_red.png") 0 0 no-repeat;
}

.fil-foldertree {

}

.fil-foldertree ul {
   margin: 0;
   padding: 0;
}

.fil-foldertree li {
   list-style: outside none none;
   margin: 0;
   padding: 0 0 0 16px;
   white-space: nowrap;
}

.fil-foldertree span.folder-name {
   cursor: pointer;
}

.text-smaller {
   font-size: 0.8em;
}

.select2-dropdown {
   font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
   font-size: 0.8em;
}

#dialog-show-day .appointments {
   font-size: 0.8em;
   line-height: 1.8em;
}

#dialog-show-appointment .app-info {
   font-size: 0.8em;
   color: #999999;
   background-color: #eeeeee;
   border-radius: 5px;
   padding: 0.3em;
   margin-bottom: 10px;
}


#section-absences { padding: 0; }

#section-absences .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: none; width: 40em;}

#tab-absence-by-pupil {
   display: flex;
   flex-direction: row;
}

#tab-absence-by-pupil .list {
   margin-bottom: 1rem;
}


#tab-absence-by-date {
   display: flex;
   flex-direction: row;
   margin-left: -1.2rem;
}


#tab-absence-by-pupil .select-pupil td {
   cursor: pointer;
   padding-right: 1rem;
}

.absences-by-pupil, .absences-by-date {
   margin-left: 1rem;
}

#tab-absence-by-pupil .select-pupil {
   border-right: 1px solid #a6c9e2;
   padding-right: 1rem;
}

.absences-by-pupil .head, .absences-by-date .head {
   display: flex;
   align-items: center;
}

.absences-by-pupil .head .btn-update, .absences-by-date .head .btn-update {
   font-size: 2rem;
   font-weight: bold;
   margin-right: .5rem;
   color: red;
   cursor: pointer;
}

#tab-absence-parent-data {
   display: flex;
   flex-direction: row;
   margin-left: -1.2rem;
}

#tab-absence-parent-data .pupils .list {
   height: 50rem;
   overflow-y: auto;	
}

#tab-absence-parent-data .pupils .list table .header {
	position: sticky;
   top: 0;
   background-color: white;
}

#dialog-edit-absence table {
   border-collapse: collapse;
}

#dialog-edit-absence table td {
   border-bottom: 1px solid #ddd;
   padding: 0.7rem 0;
}

#dialog-edit-absence .absence-time table td {
   border-bottom: 0;
   padding-top: .3rem;
   padding-right: .5rem;
}

#dialog-edit-absence .user {
   font-weight: bold;
   color: blue;
}

#dialog-edit-absence .late-time {
	margin-top: .3rem;
}

div#section-messages {
   height: auto;
   border: none;
   margin: 0;
   padding: 0;
   width: auto;
   font-size: 0.9em;
   background-color: #e0e0e0;
}

#section-messages .messages-folders {
   float: left;
   margin: 0.5em;
}

#section-messages .messages-folders .list {
   background-color: #ffffff;
   border: 1px solid #bbbbbb;
   padding: 1em;
}

#section-messages .messages-folder-content {
   border: 2px solid blue;
   overflow: auto;
   min-width: 30em;
   margin: 0.5em;
   background-color: #ffffff;
   border: 1px solid #bbbbbb;
}

#section-messages .messages-folders li {
   padding-left: 1.5em;
   padding-right: 0.3em;
   position: relative;
   list-style: outside none none;
   margin: 0;
   overflow: hidden;
   cursor: pointer;
}

#section-messages .messages-folders ul {
   padding: 0.2em;
}

#section-messages li.folder > .thumb {
   background-image: url('icons/folder.png');
   width: 16px;
   height: 16px;
   background-size: 100%;
   margin: .1em 0 0 -1.2em;
}

#section-messages li.folder.inbox .thumb { background-image: url('icons/email.png'); }
#section-messages li.folder.sent  .thumb { background-image: url('icons/email_go.png'); }
#section-messages li.folder.trash .thumb { background-image: url('icons/bin.png'); }

#section-messages .messages-folders li.folder.selected {
   background-color: #fff6d6;
}

#section-messages .messages-folders .folder-actions {
   padding: 0.5em 0;
}

#section-messages .messages-folders .actions {
   padding-bottom: 0.5em;
}


#section-messages .messages-folders .actions button {
   background: #f5f5f5;
}

#section-messages .context-menu {

   border: 1px solid #4297d7;
   padding: 0.5em;
   background-color: #fff;
   border-radius: 4px;

}

#section-messages .context-menu .header {
   font-weight: bold;
   font-size: 0.8em;
   color: #2e6e9e;
}

#section-messages .context-menu .btn-close {
   position:absolute; right: 0.3em;
   cursor: pointer;
}

.ui-button .ui-icon.email-write {
    background-image: url(icons/email_edit.png); width: 16px; height: 16px;
}

.ui-button .ui-icon.folder-rename {
    background-image: url(icons/folder_edit.png); width: 16px; height: 16px;
}

.ui-button .ui-icon.folder-empty {
    background-image: url(icons/folder_delete.png); width: 16px; height: 16px;
}

.ui-button .ui-icon.delete {
    background-image: url(icons/delete.png); width: 16px; height: 16px;
}

.ui-button .ui-icon.folder-new {
    background-image: url(icons/folder_add.png); width: 16px; height: 16px;
}


li.file .thumb:after {
  content: '';
}


.dlg-create-message input.subject, .dlg-create-message textarea.body {
   background-color: white;
   border: 1px solid #aaa;
   border-radius: 4px;
}

#section-messages .attachment {

   color: #555;
   padding: 0 0.3em;
   margin: .1em;
   /*border: 1px solid #555555;*/
   border: 1px solid #888;
   border-radius: 0.3em;
   float: left;
   background-color: #e0e0e0;
   cursor: pointer;

}

.import-log {
   background-color: #000096;
   color: #ddd;
   font-size: .8rem;
   padding: 1rem;
}

.import-log .section {
   margin: .2rem 1rem;
   padding: .5rem 1rem;
   background-color: #333;
}


.import-log .grid-cell {
   padding-right: 1rem;
   white-space: nowrap;
}

.import-log .grid-cell.grid-header {
   font-weight: bold;
}

.import-log .grid-cell.odd {
   background-color: #555;
}

.import-log .grid-cell.even {
   background-color: #333;
}

#adm-tab-user-groups .permissions ul { 
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#adm-tab-user-groups .permission-table {
   font-size: .9rem;
   border: 1px solid #ddd;
   border-collapse: collapse;
} 

#adm-tab-user-groups .permission-table td {
   border-bottom: 1px solid #ddd;
   padding: 0 .3rem;
   height: 1.5rem;
   cursor: pointer;
}

#adm-tab-user-groups .permission-table tr.group td {
   font-weight: bold;
   color: blue;
}