html {
    font-size: 16px;
    overflow:hidden;
} 
.table{
	display:table;
}
.row{
	display:table-row;
}
.cell{
	display:table-cell;
}

/*****************************************************
*                Body                                *
*****************************************************/

body {
	overflow:hidden;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
}

/*****************************************************
*                Pages                                *
*****************************************************/


#background_page {
    position:absolute;
    background-image: url(../images/hus.jpg); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
	height:100vh;
	height:100dvh;
}

#main_page{
	position:absolute;
	width:100%;
	height:100vh; 
	height:100dvh;
	overflow-y:auto;
}

#page_container{
	position:relative;
	width:80%;
	display:none;
	min-width: 19rem; /* matches small 320px screen, leaves a bit space */
	background-color: transparent;
	margin: 1rem auto;
}

/*****************************************************
*                Header                              *
*****************************************************/
#header{
	position:relative;
	z-index:30;
}

#header .banner .user_status{
	width:100%;
}
#header .banner .greeting{
	display:inline-block;
	vertical-align: top;
	margin-top: .5rem;
	margin-left: 1rem;
	cursor:pointer;
}
#header .banner .greeting img {
	width:1rem;
	margin-right:.5rem;
}

#header .banner .greeting .text {
	display:inline-block;
}
#header .banner .login_out {
	display:inline;
}
#header .banner .login_out img{
	width:1.5rem;
	margin:.5rem 0 0 .5rem;
	cursor:pointer;
}
#sub_header{
	width:100%;
	display:none;
}
#sub_header .cell{
	vertical-align:top;
	width:33.33%;
}
#sub_header .logo{
	text-align:left;
}
#sub_header .logo img{
	max-height: 3rem;
	margin:0 1rem;
	border-radius: .3rem;
}
#sub_header .short_cut{
	text-align:center;
}
#sub_header .chat_link img{
	height:2.5rem;
}
#sub_header .calendar_link{
	display:none;
}
#sub_header .calendar_link img{
	height:2.5rem;
}
#sub_header .menu_button{
	float:right;
}

/*****************************************************
*                Menu                                *
*****************************************************/

.menu_button{
	width: 3rem;
	padding-right:1rem;
	cursor:pointer; /* needed for iPhone */
}

.menu_button:hover{
	cursor:pointer;
}



.menu_button:active{
	/*position:relative;
	top:1px; */
	width:3.4rem;
	margin-right:.05rem;
} 

.menu_button .bar{
	width: 100%;
    height: .5rem;
    background-color: #777;
    margin: .5rem 0;
    border-radius: .2rem;
}
.menu_button .bar.top{
	margin-top:0;
}

.menu_button .bar.bottom{
	margin-bottom:0;
}



/* Dropdown Content (Hidden by Default) */
.dropdown_content {
    display: none;
    position: absolute;
    right:0;
    background-color: #006AA7; /* swedish blue */
    width: 10rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius:.3rem;
    z-index: 30;
	float: right;
	margin-right: 1rem;
}

/* Links inside the dropdown */
.dropdown_content a {
    color: #FECC00; /* swedish yellow */
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
    font-size:larger;
    font-weight:bold;
}

/* Change color of dropdown links on hover */
.dropdown_content a:hover {
	background-color: #FECC00;
	color: #006AA7;
	text-decoration:none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/****************************************************************
*                  Tables                              			*
*****************************************************************/

table.no_borders {
	border-width: 0px;
	border-spacing: 2px;
	border-collapse: separate;
}
table.no_borders th {
	border-width: 0px;
	padding: 1px;
}
table.no_borders td {
	border-width: 0px;
	padding: 1px;
}

td.vertical_line {
	background-color: #336699;
	width: 1px;
}
td.horizontal_line {
	background-color: #336699;
	height: 1px;
}
a {
	color: #3366CC;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/************************************************************
*                  Buttons                                 *
************************************************************/
/* These are split into 2 declarations since Safari does not act correctly when ::file-selector-button is combined with othe classes */
.btn{
	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	/*font-size:20px; */
	font-weight:bold;
	padding:.4rem 1rem;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}

.select_media::file-selector-button {
	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	/*font-size:20px; */
	font-weight:bold;
	padding:.4rem 1rem;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.btn{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	background-color:#408c99;
}
.select_media::file-selector-button:hover{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	background-color:#408c99;
}
.btn:active
{
	position:relative;
	top:1px;
}
.select_media::file-selector-button:active{
	position:relative;
	top:1px;
}
.select_media::file-selector-button{
	border:none;
}
/************************************************************
*                  Arrows                                   *
************************************************************/

.left_arrow {
    width:3rem;
    height:1.4rem;
    background:#006AA7; /*swedish blue */
    color:#FECC00; /* swedish yellow */
    font-weight:bold;
    margin-left:1rem;
    position:relative;
    cursor:pointer;
}
.left_arrow:hover{
	background:#FECC00; /* swedish yellow */
	color:#006AA7; /*swedish blue */
}
.left_arrow::before {
    content:"";
    position:absolute;
    border-bottom: .7rem solid transparent;
    border-right: .7rem solid #006AA7; /*swedish blue */
    border-top: .7rem solid transparent;
    height: 0px;
    width: 0px;
    margin-left:-3.7rem;
    cursor:pointer;
}
.left_arrow:hover::before{
	border-right: .7rem solid #FECC00; /* swedish yellow */
} 
.left_arrow p{
		padding-top:.26rem;
		margin:0 .3rem 0 0;
}

.right_arrow {
    width:3rem;
    height:1.4rem;
    background:#006AA7; /*swedish blue */
    color:#FECC00; /* swedish yellow */
    font-weight:bold;
    margin-left:0;
    position:relative;
    cursor:pointer;

}
.right_arrow:hover{
	background:#FECC00; /* swedish yellow */
	color:#006AA7; /*swedish blue */
}
.right_arrow::after {
    content:"";
    position:absolute;
    border-bottom: .7rem solid transparent;
    border-left: .7rem solid #006AA7; /*swedish blue */
    border-top: .7rem solid transparent;
    height: 0px;
    width: 0px;
    margin-left:3rem;
    top:0;
    cursor:pointer;
}
.right_arrow:hover::after{
	border-left: .7rem solid #FECC00; /* swedish yellow */
}
.right_arrow p{
		padding-top:.26rem;
		margin:0 0 0 .5rem;
}


.small_left_arrow {
    border-bottom: .7rem solid transparent;
    border-right: .7rem solid #006AA7; /*swedish blue */
    border-top: .7rem solid transparent;
    height: 0px;
    width: 0px;
    cursor:pointer;
}
.small_left_arrow:hover{
	border-right: .7rem solid #FECC00; /* swedish yellow */
	color:#006AA7; /*swedish blue */
}

.small_right_arrow{
   border-bottom: .7rem solid transparent;
    border-left: .7rem solid #006AA7; /*swedish blue */
    border-top: .7rem solid transparent;
    height: 0px;
    width: 0px;
    cursor:pointer;
}
.small_right_arrow:hover{
	border-left: .7rem solid #FECC00; /* swedish yellow */
	color:#006AA7; /*swedish blue */
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: .7rem solid transparent;
  border-right: .7rem solid transparent;
  
  border-bottom: .7rem solid #006AA7; /*swedish blue */
}
.arrow-up:hover {
		border-bottom: .7rem solid #FECC00; /* swedish yellow */
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: .7rem solid transparent;
  border-right: .7rem solid transparent;
  
  border-top: .7rem solid #006AA7; /*swedish blue */
}

.arrow-down:hover {
		border-top: .7rem solid #FECC00; /* swedish yellow */
}
  
/************************************************************
*                  Spinner (loading)                        *
************************************************************/

#spinner{	
	margin: auto;
	width: 100%;
	text-align: center;
	z-index: 30;
	position: absolute;
	top: 20%;
	display:none;
}
#spinner img{
	width: 20%;
    max-width: 8em;
}
  
/***********************************************************
 * Error messages
 * *********************************************************/
 
 #errorMessage{
	display:none;
	padding: 1rem;
	text-align:center;
 }
/************************************************************
*      Notifications and promotions			                
************************************************************/

#new_version_notification{	
	margin: auto;
	width: 100%;
	text-align: center;
	background: yellow;
	z-index: 40;
	position: absolute;
	top:0;
	display:none;
}

.push_dialog{
	width:20rem;
	max-width:100%;
	position:relative;
	text-align: center;
	background: yellow;
	z-index: 30;
	margin:auto;
	margin-top:1rem;
}

#new_version_notification .notification_text,
.push_dialog .notification_text{
	margin: 1rem auto .5rem auto;
	width:15rem;
	text-align:left;
	font-size:small;
}

.push_dialog .title{
	font-size:large;
	text-align:center;
	padding-top:1rem
}
.push_dialog .notification_text{
	padding-top:1rem;
}
.push_dialog .buttons{
	display:inline-block;
	margin-top:2rem;
	margin-bottom:1rem;
	width:70%;
	max-width:20rem;
}
  
.notification_close{
	float:right;
	margin:.3rem;
}

#notification_reload{
	margin:.3rem;
}
#push_deny,#promo_deny{
	float:left;
}
#push_accept,#promo_accept{
	float:right; 
}

#promote_pwa_install{
	position: relative;
	width: 80%;
	max-width:50rem;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	background-color:yellow;
	z-index:20;
}

#promote_pwa_install .title{
	text-align:center;
	font-weight: 600;
	font-size:large;
	padding-top:1rem;
}

#promote_pwa_install .promotion_text{
	margin:0 1rem;
	display:inline-block;
	text-align:left;
}

#promote_pwa_install .promotion_text img{
	height:1em;
}

.promo_dialog .buttons{
	display:inline-block;
	margin-bottom:1rem;
	width:90%;
	max-width:20rem;
}

/************************************************************
*                  Checklists                                *
************************************************************/
.checklist {
	border: 2px inset #ccc;
	list-style: none;
	overflow: auto;
	width: 100%; 
	color: #000000;
	background: #99ccff;
}
 .checklist, .checklist li, .checklist ul { margin-left: 0; padding: 0; }
.checklist label { display: block; padding-left: 25px; text-indent: -25px; }
.checklist label:hover, .checklist label.hover { background: #ddd; color: #000; }
 * html .checklist label { height: 1%; } 
.checklist { font-size: 0.9em;  height: 10em; }
.checklist .alt { color: #000000; background: #f5f5f5; }
.checklist input { vertical-align: middle; } 


/************************************************************
 * 
 * 
*                  Pages and Dialogs                        
* 
* *
************************************************************/
.messageDialog .title{
	font-size:1.2rem;
	font-weight:600;
}
.messageDialog .message{
	width:80%;
	margin-left:10%;
}

.messageDialog .buttons{
	width:80%;
	margin-left:10%;
	margin-top:1rem;
	padding-bottom:1rem;
	text-align:center;
}

.dPage{
	height:100%;
	}

#dialog_container{
	position:absolute;
	top:5rem;
/*	width:40%; */
	height:auto;
	display:none;
	z-index:25;
	max-width: 33rem;
	min-width: 20rem;
	background-color: transparent;
	margin: 0 auto;
	left: 0;
	right: 0;
}
.dDialog .dialog_header{
	text-align:center; 
	Font-size: x-large; 
	clear:both;
	margin-bottom:1rem;
}
.dDialog .dialog_message{
	text-align:center; 
	Font-size: x-large; 
	color:red;
	clear:both;
	margin-bottom:1rem;
}
.dDialog .kontingent_status{
	text-align:center;
}

.dDialog .kontingent_status .btn{
	margin-bottom:2em;
}

.dDialog .close{
	float:right;
	cursor:pointer;
	margin-right:.5rem;
	margin-top:.5rem;
}

.iDialog{
	width:100%;
	height:auto;
}

.dDialog{
	width:100%;
	height:auto;
	background-color:white;
	-webkit-box-shadow: 3px 3px 5px 6px rgba(0, 0, 0, 0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px 6px rgba(0, 0, 0, 0.4);  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 6px rgba(0, 0, 0, 0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
table.dialog{
	width:100%;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:5%;
}
table.dialog tr{
	text-align:center;
}

.dDialog input.date{
	width:5rem
}


/*
 * Show events dialog
 * */
.show_events_dialog{
	max-height:30rem;
	overflow:auto;
}

.show_events_dialog .descriptions div{
margin-bottom:.2rem;
}
.show_events_dialog .ophold{
	clear:both;
	background-color: #f0f0f0;
	display: inline-block;
	width: 98%;
	margin: .2rem auto .2rem auto;
	padding: 1rem 0 0 .5rem;
}

.show_events_dialog .arrangement{
	clear:both;
	background-color: #f0f0f0;
	display: inline-block;
	width: 98%;
	margin: .2rem auto .2rem auto;
	padding: 1rem 0 0 .5rem;
}

.show_events_dialog .exception{
	clear:both;
	background-color: #f0f0f0;
	display: inline-block;
	width: 98%;
	margin: .2rem auto .2rem auto;
	padding: 1rem 0 1rem .5rem;
}

.show_events_dialog .descriptions{
	width:70%;
	float:left;
}

.show_events_dialog .actions{
	width:25%;
	float:right;
}

.show_events_dialog .edit {
	cursor:pointer;
}
.show_events_dialog .edit img{
	width:2rem;
	margin:.5rem
}
.show_events_dialog .edit:active{
	position:relative;
	top:1px;
}

.show_events_dialog .trash{
	cursor:pointer;
}

.show_events_dialog .trash:active{
	position:relative;
	top:1px;
}

.show_events_dialog .trash img{
	width:2rem;
	margin:.5rem
}

.show_events_dialog .ics{
	cursor:pointer;
}

.show_events_dialog .ics:active{
	position:relative;
	top:1px;
}

.show_events_dialog .ics img{
	width:3rem;
	margin:.2rem 0 .2rem .2rem;
}
.show_events_dialog .changes{
	cursor:pointer;
}

.show_events_dialog .changes img{
	width:3rem;
	margin:.5rem
}

.show_events_dialog .new_event_container{
	width:80%;
	margin: auto;
}
.show_events_dialog .new_event_container .new_event{
	cursor:pointer;
}

.show_events_dialog .new_event_container img{
	width:3rem;
}

.dDialog #history_list{
	padding:1em;
	text-align:center;
}
.dDialog #history_list .close{
	margin-bottom:1em;
}

/***
*    Login    
********/
#log_in {
	z-index:1; 
}

#log_in input{
	margin-bottom:.5rem;
}
#log_in form table{
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;  
}
#log_in form table td{
	text-align:center;
}

/****
 * 	Show rules
 * */

.rules_dialog h1.header{
	font-size:large;
}
.rules_dialog{
	height:80VH;
	overflow:auto;
}
.rules_dialog .content{
	display: inline-block;
	margin:0 1rem;
}
 /****
 * 	Show profile
 * */
 
.profile table.dialog{
	margin-bottom:0;
	padding-bottom:0;
}
  
.profile table.dialog tr{
	text-align:left;
}
 
.profile table.dialog input{
	max-width:90%;
}

/************************************************************
*                  Calendar                                 *
************************************************************/

#calendar_header{
	position:relative; 
	width:100%;
	margin:auto;
	z-index:3;
}

#calendar_navigation{
	width:20%;
	min-width:18rem;
	margin:auto;
	padding-right:.7rem;
}


#calendar_navigation .left_arrow{
	float:left;
	margin-left:0.69rem; /* should be .7, but firefox cannot calculate correctly */
}

#calendar_navigation .left_arrow p{
	margin:.24rem .0rem 0rem .5rem;
	padding-top:0;
}

#calendar_navigation .left_arrow::before{
	margin-left:-.7rem;
}

#calendar_navigation .arrow-down{
	display:inline-block;
	margin: .3rem .3rem 0 .3rem;
	cursor:pointer;
}

#calendar_navigation .inner{
	display:inline-block;
	margin-left:1rem;
	width:9.2rem;
}

#calendar_navigation .arrow-up{
	display:inline-block;
	cursor:pointer;
}

#calendar_navigation .small_left_arrow{
	display:inline-block;
	margin: 0 1rem 0 .3rem;
	cursor:pointer;
}

#calendar_navigation .small_right_arrow{
	float:right;
	cursor:pointer;
}

#calendar_navigation p.title{
	margin:0;
	display:inline-block;
	text-align:center;
	vertical-align:top;
	margin-top:.1rem;
	font-size:large;
	font-weight:bold;
	background-color:none;
	color:#006AA7; /*swedish blue */
	
}

#calendar_navigation .right_arrow{
	display:inline-block;
	float:right;
}

#calendar_navigation .right_arrow p{
	margin:0 0 0 .7rem;
}

#calendar_header table{
	width:100%;
}
#calendar_header table th{
	width:14.29%;
	font-size:large;
}
#calendar_wrapper{
	position:relative; 
	z-index:2; 
	overflow: auto;
}

#calendar_touch{

}

#calendar_content table{
	margin-bottom:2rem;
}
#calendar_content table.month{
	width:100%;
	border-collapse: separate;
	background-color:white;
	
}

#calendar_content  td.day{
	text-align:center;
	color:#7C340D;
	background:#00CB2E;
	font-size:large;
	height:2rem;
}

/* the div that contains the link */
td.calendar_date{
	height:30px;
	text-align:center;
	cursor:pointer;
}

td.calendar_date_no_pointer{
	height:30px;
	text-align:center;
	background-color:lightgrey;
	color:#666666
}

td.holiday{
	color:white;
	background-color:#0000FF;
}

td.calendar_date:hover{
	height:30px;
	cursor:pointer;
	background-color:lightgrey;
	color:black;
}


#calendar_content table.month td{
	font-size: 1.5em;
	}
	
#calendar_content table.month td.ophold{
	font-weight: bold;
	font-style: italic;
	font-family:'sans-serif','arial black', 'verdana';
	color:#fff;
}

#calendar_content table.month td.mask{
	background:lightgrey;
}

#calendar_content table.month td.day:not(.mask){
	cursor:pointer;
}



/*	Status values
 * 
 * public static final int DELETED = 0;
    public static final int REQUESTED = 1; 
    public static final int REJECTED = 2;
    public static final int APPROVED = 3;
    public static final int PENDING = 4;
    public static final int RESERVED = 5;
    * 
    */
 
#calendar_wrapper td.requested {
	background-color: #66FFFF; 
}

 
#calendar_wrapper td.rejected {
	background-color: #FF0000; 
}

#calendar_wrapper td.approved {
	background-color: #FFCC00; 
}

#calendar_wrapper td.pending {
	background-color: #FFFF66; 
}

#calendar_wrapper td.blocked{
	background-color: #0000FF; 
	color: #FFFFFF;
}

#calendar_wrapper td.reserved {
	font-weight: bold;
	font-style: italic;
	background-color: #0000FF; 
	color: #FFFFFF;
}

#calendar_wrapper td.ophold {
			color: #FFFFFF
}

#calendar_wrapper td.blocked.requested{
	background: repeating-linear-gradient(
				45deg,
				#66FFFF,
				#66FFFF 10px,
				#0000FF 10px,
				#0000FF 20px);
}

#calendar_wrapper td.blocked.approved{
	background: repeating-linear-gradient(
				45deg,
				#FFCC00,
				#FFCC00 10px,
				#0000FF 10px,
				#0000FF 20px);
}

#calendar_wrapper td.blocked.rejected{
	background: repeating-linear-gradient(
				45deg,
				#FF0000,
				#FF0000 10px,
				#0000FF 10px,
				#0000FF 20px);
}
.unassigned {
	background-color: #00CC00; 
}

/************************************************************
*                  Chat		                                 *
************************************************************/
#chat{
	max-width:50rem;
	margin:auto;
}
#chat .chat_header{
	width:100%;
}
#chat .chat_header .title{
	display:inline-block;
	max-width:80%;	
}
#chat .chat_header .title h1{
	margin-top:0;
}
#chat .buttons{
	float:right;
	margin-top:.5rem;
}
#chat .buttons .newChat img{
	height:2.5rem;
}
#chat .content_container{
	clear:both;
	background-color:white;
	border: 1px solid gray;
	margin:auto;
}


#chat .content{
	margin:1rem;
	overflow:auto;
	max-height: calc(100vh - 16rem);
	max-height: calc(100dvh - 16rem);
}
#chat .content .spacer{
	height:1rem;
}

#chat .content .chat .button{
	float:right;
}

#chat .content .chat .button img{
	height:2rem;
}

#chat .content .chat .button.delete img{
	height:1.6rem;
	margin-left:.5rem;
	margin-top: .2rem;
	margin-right:1rem;
}

#chat .content .chat .message{
	word-wrap:break-word;
	min-height:3rem;
	margin-bottom:.5rem;
}

#chat .content .chat .username{
	border-bottom: 2px solid gray;
	display:inline-block;
	margin-bottom:.5rem;
	max-width:75%;
}

#chat .content .chat .originator{
	margin-bottom:1rem;
}

#chat .content .medias{
	text-align:center;
}

#chat .content .medias .media{
	margin-bottom:.5rem;
}

#chat .content .medias .media img{
	width:100%;
	max-width:600px;
}

#chat .content .medias .media video{
	width:100%;
	max-width:600px;
}

#chat .content .chat_divider{
	border-top:3px solid gray;
}
#chat .chat_footer{
	text-align:center;
	margin-top:.5rem;
}
#chat .chat_footer img{
	height:2rem;
}

#chat .chat_footer .first.select_range{
	float:left;
}
#chat .chat_footer .steps.select_range{
	display:inline-block;
	margin-top: .5rem;
	color: #3774c5;
	font-size:1.2rem;
	font-weight:600;
}
#chat .chat_footer .last.select_range{
	float:right;
}
.chat_reply_dialog .dialog_header{
	margin-bottom:0;
}
.chat_reply_dialog .mode{
	text-align:center;
	margin: .5rem 0;
}
.chat_reply_dialog .mode input:hover,
.chat_reply_dialog .mode label:hover{
	cursor:pointer;
}
#chat_dialog{
	padding: 0 5%;
	text-align:center;
}

#chat_dialog .from{
	text-align:left;
}

.chat_dialog .dialog_header{
	margin-bottom:.5rem;
}
#chat_dialog table.dialog{
	padding-bottom:0;
}

#chat_dialog .message_container{
	padding-bottom:.5rem;
}

#chat_dialog .chat_message{
	height:30vh;
	width:100%;
	resize:none;
}
#chat_dialog .select_media{
	font-size:.75rem;
	width:100%;
	display:none;
}
#chat_dialog .explain{
	margin-bottom:.5rem;	
}
#chat_dialog .selected_medias{
	margin-top:.5rem;	
}
#chat_dialog .number_of_medias{
	display:inline;	
	font-weight:700;
	color:blue;
}
#chat_dialog .media::file-selector-button{
	
}
#chat_dialog .button_container{
	width: 90%;
	padding: .5rem;
	margin: auto;
	display:inline-block;
}
#chat_dialog .btn.save_cancel.save{
	float:left;
}
#chat_dialog .btn.save_cancel.cancel{
	float:right;
}

/************************************************************
*                  Adresses                                 *
************************************************************/
#address_list{
	background-color:transparent;
	max-width:67rem;
	margin:auto;
}

#address_list table{
	width:100%;
}

#address_list .address_header{
	position:relative; 
/*	margin-left:1rem; */
	max-width:66rem;
	width:100%;
	text-align:center;
}

#address_list .address_header .title{

}

#address_list .address_header .buttons{
	float:right;
}

#address_list .address_header .buttons .btn{
	margin:1em;
}

#address_list .address_header h1{
}
#address_list .content{
	position:relative; 
	z-index:2; 
	overflow: auto;
	width:100%;
	max-height:70vh;
	border:1px solid gray;
	display:inline-block;
}

#address_list .andel{
	background-color: #B3E4FD;
	width:100%; 
	padding-left: 1rem;
}

#address_list .address_detail{
	display:inline-block;
}  

#address_list .deleted .address_detail{
	text-decoration: line-through;
}

#address_list .name{
	width: 15rem;
}

#address_list .email{
	width: 15rem;
}

#address_list .phone{
	width:7rem;
}

#address_list .cellphone{
	width:7rem;
}

#address_list .address{
	width:20rem;
}
#address_list .address_element_container{
	padding-left: 1rem;
	border-bottom: 1px solid gray;
	background-color:white;
	width:100%; 
}

#address_list .representative{
	font-style:italic;
}
/************************************************************
*                  Profile                                 *
************************************************************/
.profile-form .toggle-password:hover{
	cursor:pointer;
}

.profile-form .field-icon {
	float: right;
	margin-left: .2rem;
	margin-top: -.3rem;
	position: absolute;
	width:2rem;
	height:1.6rem;
	z-index: 2;
	background-size:cover;	
}

.profile-form .eye{
	background-image: url("../images/icons/eye.png");
	height:32px;
}

.profile-form .eye-slash{
	background-image: url("../images/icons/eye-slash.png");
}
	
/************************************************************
*                  Kontingenter                             *
************************************************************/
#kontingenter .btn.close{
	margin:.5rem;
}

#kontingenter {
	position:relative;
	height:auto; 
	overflow: auto;
}
#kontingenter  h1.title{
	text-align:center;
}

#kontingenter .content{
	background-color:white;
	width:40rem;
	margin:auto;
}

#kontingenter table{
	margin:auto;
	clear:both;
	border-bottom: 1rem solid white;
	background-color:white;
}
#kontingenter th .subtitle{
font-size:1.5em;
}

#kontingenter .border-bottom{
	border-bottom: 1px solid gray;
}

#kontingenter td.year{
	width:11rem;
	text-align:center;
}

#kontingenter .thisyear{
	font-size:larger;
}

#kontingenter .btn.year {
	padding: .2rem 1rem;
}

#kontingenter td.saveRow .btn{
	padding: .2rem 1rem;
	margin-top:0;
	opacity:.3;
}

#kontingenter th.saveRow .btn{
	padding: .2rem 1rem;
	margin-top:0;
	opacity:.3;
}

.kontingent_dialog{ /* not in use */
	position:absolute;
	top:0;
	left: 0;
	right: 0;
	margin: 30px auto;
	height:170px; 
	width:310px;
	text-align:center; 	
	z-index:4;   
	background-color: white; 
	border: 1px solid gray;
	overflow: auto;
	display:none;
}

/************************************************************
*                  Administration                              
************************************************************/
#administration .admin{
	display:none;
}

#administration .admin.default{
	display:block;
}
#administration .tabs{
	border-left:1px solid gray;
	display:inline-block;
	margin:.2rem;
}
#administration .tabs .tab{
	background-color:white;
	color:grey;
	float:left;
	cursor:pointer;
	font-size:large;
	border-top:1px solid gray;
	border-bottom:1px solid gray;
	border-right:1px solid gray;
}

#administration .tabs .tab p{
	padding:.2rem;
	margin:0;
}

#administration .tab.default{
	background-color:#006AA7; /* sweedish blue */
	color:#FECC00; /* swedish yellow */
}

#administration .sheet{
	clear:both;
}

#administration .sheet p.subtitle{
	font-weight:bold;
	text-align:center;
}

#administration .sheet.userdata input[type=text]{
	width:80%;
} 

#administration .sheet.userdata{
	height:73vh;
	overflow:auto;
}

#administration .sheet.rules div.btn{
	float:right;
}

#administration .sheet.rules .grey{
	background-color:#dcdcdc;
}

#administration .sheet.rules tr{
	height:2.5rem;
}

#administration .sheet.rules{
	height:73vh;
	overflow:auto;
}

#administration .sheet.rules td.right{
	text-align:right;
	padding-right:.2rem;
}

/************************************************************
*                 adjust for different screen sizes			*
*************************************************************/
@media screen and (max-width: 1024px){
		.profile table.dialog input{
		max-width:80%;
	}
}

@media screen and (max-width: 850px){
		.profile table.dialog input{
		max-width:70%;
	}
}
@media screen and (max-width: 600px){
	
	.menu_button{
		width: 3rem;
	}
	.menu_button .bar{
		height: .5rem;
		margin: .5rem 0;
	}
	.logo img{
		max-width: 3rem;
		border-radius: .3rem;
	}
	
	#address_list .content{
		height:60vh;
	}
	
	#chat .buttons{
		margin-top:1rem;
	}
}
@media screen and (max-width: 428px){
	
	#sub_header{
		margin-top:0.5rem;
	}
	
	.menu_button{
		width: 2.5rem;
	}

	.logo img{
		max-width: 2.5rem;
		margin:0 1rem;
		border-radius: .3rem;
	}
	#address_list .content{
		height:55vh;
	}

	#chat .chat_footer img {
		height: 1.5rem;
	}
	#chat .chat_footer .steps.select_range{
		margin-top:0;
	}
	
}

@media screen and (max-width: 375px){
		
	.menu_button{
		width: 2.5rem;
	}

	.logo img{
		border-radius: .3rem;
	}
	#address_list .content{
		height:50vh;
	}
	
	#address_list .address_header .buttons {
		float: none;
    }
    
    #address_list .address_header h1{
		font-size:small;
	}

@media screen and (max-width: 320px){
	
	/*****************************************************
	*                Dialogs                              *
	*****************************************************/
	.dDialog{
		width:90%;
		margin:auto;
	}
	.dDialog input.date{
		width:4rem;
		font-size:.8rem;
	}
	
	.profile table.dialog input{
		max-width:60%;
	}
	
}