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/phonautograph.jpg); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
	height:100vh;
	height:100dvh;
}

#main_page{
	position:absolute;
	width:100%;
	height:100vh; 
	height:100dvh;
	overflow: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;
	width:100%;
	z-index:30;
}
#header .banner{
	width:100%;
}
#header .banner .user_status{
	width:16rem;
}

#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;
}
#header .banner .title.center{
	text-align:center;
	vertical-align: middle;
	font-size: 1.4rem;
}
#header .banner .title.right{
	width:16rem;
	vertical-align: middle;
}
#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 .cloud_link{
	display:none;
}
#sub_header .cloud_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: gray;
    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;
	padding:.3rem 0;
}

/* Links inside the dropdown */
.dropdown_content a {
    color: white;
    padding: .5rem 1rem;
    margin: 0 .3rem;
    text-decoration: none;
    display: block;
    font-size:larger;
    font-weight:bold;
}

/* Change color of dropdown links on hover */
.dropdown_content a:hover {
	background-color: whitesmoke;
	color: #333;
	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;
	margin-top:.5rem;
}
.dDialog .dialog_sub_header{
	text-align: center;
	font-size: medium;
	margin-bottom: .5rem;
}
.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%;
}

/************************************************************
*                  Cloud                                 *
************************************************************/

.inline-visible{
	display:inline;
}

.inline-hidden{
	display:none;
}

.logo-container{
	vertical-align:middle;
	padding-left:1em;
	padding-top:.5em;
	padding-bottom:.5em;
	width:35%;
}
.header-text{
	vertical-align: middle;
	color:white;
	font-size:.8rem;
	padding-right:1rem;
}

.banner .site-description{

}

.site_logo {
	background-image: url("../images/vh_logo3.png");
	background-size: contain;
	background-repeat:no-repeat;
	display: inline-block;
	width: 100%;
	height: 7rem;
} 

#folder {
background-color:#989898;
    opacity:.95;
    max-width: 50rem;
	margin: auto;
	position:relative;
}

.inner{
	padding:1em;
	width:100%;
}

.table{ 
	display: table; 
}

.row{ 
	display: table-row; 
}

.cell{ 
	display: table-cell;
	}

.button {
	display: inline-block;
	padding: 2px 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	    touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	border: 1px solid #C7C3BF;
	border-radius: 4px;
    background-color: #E9E9E9;
    background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%);
    box-shadow: 0 0 0 1px #ffffff inset;
    -webkit-box-shadow: 0 0 0 1px #ffffff inset;
    color: #333;
}

.button:focus,
.button:hover {
 	text-decoration: none;
 	outline: none;
 	border-color: #0A8ED0;
    background-color: #FFFFFF;
    background-image: -webkit-linear-gradient(top, #E9E9E9 0%, #FFFFFF 100%);
    background-image: linear-gradient(to bottom, #E9E9E9 0%,#FFFFFF 100%);
    text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px -1px 0 rgb(188 42 77 / 20%);
}

#page_container{
/*	background-color: #fff; */
	border-radius: 8px;
	position:relative;
	width:100%;
}

#page_container .dCurtain{
	width: 100%;
	height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#fff;
    opacity:0.6;
    z-index:2;
    border-radius:8px;
}

#dialog_container{
    display: block;
    position: absolute;
    top: 8em;
    z-index:10;
    border:2px solid grey;
    background:white;
}
#dialog_container .close-button{
    width: 100%;
    text-align: right;
}

#dialog_container .close-button img{
	width: 2em;
	margin-top: .5em;
	margin-right: .5em;
}

#dialog_container .close-button:hover{
	cursor:pointer;
}

#description .text,
#newName .text{
	text-align:center;
}
#newName .text{
	margin-bottom:1rem;
}

#description .text textarea{
	width:80%;
	height:10rem;
	margin-bottom:1rem;
}

#description .buttons,
#newName .buttons{
	text-align:center;
	margin-bottom:1rem;
}


#file-to-move,
#files-to-cut,
#files-to-paste{
	display:none;
	width: fit-content;
	margin:auto;
	margin-bottom: .5rem;
}

#file-to-move .header,
#files-to-cut .header,
#files-to-paste .header{
	font-size: small;
	color: white;
	font-weight: 600;
	text-align: center;
	margin-bottom: .2rem;
}
/**********************************************************
 * 
 * Pop-up menu stuff
 * 
 * ********************************************************/
 #popup{
    display: none;
    position: absolute;
    border: 2px solid dimgray;
    z-index:90;
}
.action-menu-container{
	background-color:white;
}

.action-menu-container .close-button{
	background-image:url("../images/cloud/close.png");
	width:1.5em;
	height:1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	position:absolute;
	margin:.2rem;
	right:0;
}

.action-menu-container .table{
	padding-top:1rem;
	padding-right:.5rem;
	padding-left: .5rem;
}

.action-menu-container .close-button:hover{
	cursor:pointer;
}
.action-menu-container .row{
	text-align:center;
}

.action-menu-container .row .cell{
	margin:1em;
	}
.action-menu-container .row .cell.text{
	color:#333;
	font-weight: bold;
	padding-top:1em;
	text-align:left;
	padding:.5em;
}
.action-menu-container .cell.text.header{
	text-align:center;
	font-size:small;
}

.folder .selected{
	background:gray;
	color:white;
}

/*********************************
 * 	Audio and video dialog
 * *******************************/
#media_container, #video_container{
	position:absolute;
	top:12rem;
	right:0;
	left:0;
	width:19rem;
	margin:auto;
	border:2px solid gray;
}

#media_container .content{
	background-color: whitesmoke;
	text-align:center;
	font-size:small;
}

#media_container .content .header .description{
	max-height:4rem;
	overflow-y:auto;
	text-align:left;
	margin:0 1rem;
}
#media_container .content p{
	margin-top:0;
	margin-bottom:.5rem;
}
#media_container .close-button{
	background-image:url("../images/cloud/close.png");
	width:1.5em;
	height:1.5em;
	background-size: contain;
	background-repeat: no-repeat;
	margin:.2rem;
	position:absolute;
	right:0;
	top:0;
}

#media_container .download.button{
	margin-bottom:.5rem;
}
#media_container .close-button:hover{
	cursor:pointer;
}

#media_container .name{
	height:2rem;
	text-align:center;
	padding-top:.5rem;
}

#cloudAudio{
	width:96%;
	margin-left:2%;
	margin-bottom:.5rem;
	
}
#cloudMedia{
	width:98%;
}
/**********************************************************
 * 
 * Folder elements styles
 * 
 * ********************************************************/

.folder .banner.table{
	padding-top:.5rem;
	color:#fff;
	width: calc(100% - 3rem);
}

.folder .banner .row{

}
.folder .banner .row .cell{
	padding:0;
}
.folder .banner .header-left{
	margin-top:1em;
	margin-left:1em;
	border-radius: 4px;
}

.folder .banner .header-left > div{
	display:inline-block;
	border-radius:4px;
	padding-bottom:.5em;
}

#new-folder-name{
	display:none;
}
#folder .close_button{
	position: absolute;
	right: .5rem;
	top: 0;
	font-size: 3rem;
	color: black;
}


#folder .close_button:hover {
	cursor:pointer;
	color:white;
	text-decoration:none;
}

#folder .help_button a{
	position: absolute;
	right: .6rem;
	top: 2rem;
	font-size: 2rem;
	color: black;
	font-weight: bold;
	margin-top: .7rem;
}


#folder .help_button a:hover {
	cursor:pointer;
	color:white;
	text-decoration:none;
}
.folder .banner img{
	height:3em;
}
.folder .banner .header-left figure{
	margin:0;
	padding-left:1em;
	padding-right:1em;
	padding-top:.5em;
}

.folder .banner .header-left .new-folder-name img{
	height:1.8em;
}

.folder .banner .header-middle{
	border-radius: 4px;
	text-align:center;
	vertical-align: top;
	width: 50%;
	padding-top: 1rem;
}

.folder .banner .header-right{
	margin-top:1em;
	margin-right:1em;
	border-radius: 4px;
	padding-bottom:.5em;
}

.folder .banner .header-right .link{
	padding: .1rem .3rem;
	border-radius:4px;
	display:inline-block;
}
.folder .banner .header-right .link img.black{
	display:none;
}

.folder .banner .header-right figure{
	margin:0;
	text-align:right;
	padding-right:1em;
	padding-left:1em;
	padding-top:.5em;
}

.folder .banner .header-right img{
	height:3em;
}

.folder .banner .uploadspeed img{
	height:.6rem;
	vertical-align:middle;
}

.folder .inner{
	padding:0;
	opacity: 0.8;
	overflow-x:auto;
}

.folder .filelist-container{
	min-width: 40rem;
	background-color:whitesmoke;
}
.folder .table{
	border-spacing:0px;
}

.folder .table .column1{
	width:35%;
}

.folder .table .column2{
	width:25%;
}

.folder .table .column3{
	width:10%;
}

.folder .table .column4{
	width:20%;
}

.folder .table .column5{
	width:10%;
/*	text-align:center; */
}

.folder .cell {
	padding:.25em 1em;
}

.folder .filelist-content-container{
	max-height: 50vh;
	overflow: scroll;
}

.folder .table.file-list.header{
	background-color: whitesmoke;
	width: calc(100% - 1rem); /* leave space for scroll bar */
}

.folder .table .cell.header{
	font-weight:bold;
}

.folder .table .cell.header.name{
	padding-left:2em;
}

.folder .table.file-list.header .column0{
	padding-left:1em;
	
}

.folder .table.file-list.header .column1{
	padding-left:0;
	width:30%;
}

.folder .table.file-list.header .column5{
	width:inherit;
}

.folder .table span.file-list{
	overflow-y:auto;
}

.folder .filelist-content-container .file-list-content{
	word-break:break-word;
}

.folder .filelist-content-container .file-list-content .row:hover{
	background: grey;
}

.folder .table.file-list-content .cell input[type='checkbox']{
	vertical-align:middle;
	float:left;
	margin-top:1em;
}

.folder .table .top input[type='checkbox']{
	display:none;
}

.folder .table .column1 .goto {
	padding:.5em 1em;
	margin-left:1rem;
}

.folder .table .column1 .goto .icon{
	vertical-align:middle;
}

.folder .table .column1 .goto.folder .icon{
	vertical-align:middle;
	padding-top:.3em;
}

.folder .table .column1 .goto .filename{
	vertical-align: middle;
	display:inline;
	padding-left:1em;
}

.folder .table .column5 .menu img{
	width:30%;
}
	
.folder .table img.icon{
	width:2em;
}

.folder .table .cell.middle, 
.folder .uplink.middle{
	vertical-align:middle;
}

.folder .link:hover{
	cursor:pointer;
	background:whitesmoke;
	color:black;
}

.folder .banner .header-right .link:hover img.black{
	display:block;
}

.folder .banner .header-right .link:hover img.white{
	display:none;
}

.folder .pointer:hover{
	cursor:pointer;
}

.folder .up_arrow.uplink{
	color:white;
	margin:.5em;
	border-radius:4px;
	
}

.folder .up_arrow.uplink .cell{
	padding-left:.5em;
}

.folder .up_arrow.uplink:hover{
	color:black;
}

.folder .oneLevelUpIcon{
	background-image: url("../images/cloud/upOneLevelWhite.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 50px;
	height: 50px;
}
.folder .up_arrow.link:hover .oneLevelUpIcon{
	background-image: url("../images/cloud/upOneLevelBlack.png");
}

.folder .up_arrow .uplink{
	display:inline;
	margin:0;
}

.folder .list_header .name:hover{
	cursor:pointer;
	background:white;
}

.folder .list_header .sort-arrow{
	color:#396a9a;
}
/**********************************************************
 * 
 * Uploader elements styles
 * 
 * ********************************************************/
#cloud-file-uploader{
	text-align:center;
}
#cloud-file-uploader .content{
	position:relative;
}
#cloud-file-uploader .content .drop-zone-container{
	position:relative;
}
#cloud-file-uploader label.file-upload-button {
   cursor: pointer;
}
#cloud-file-uploader .upload-button-container{
	padding-bottom: 1rem;
	padding-top: .5rem;
}
#cloud-file-uploader #file-upload-button{
	opacity: 0;
   position: absolute;
   z-index: -1;
}

#drop-zone{
	width: calc(100% - 1em );
	height: calc(100% - .8em);
	top: 0;
	margin-left:.2em;
	background: transparent;
	position:absolute;
    border-color: #797979;
    border-width: .4em;
    border-style: dashed;
    border-radius: 16px;
}

#drop-zone-background{
	background: #e5e6e6;
	border-radius: 16px;
}
#drop-zone-background figure{
	margin-top:0;
}
#drop-zone-background img.upload{
	width:40%;
}

#cloud-file-uploader #file_upload_details{
	margin:auto;
}
#cloud-file-uploader #file_upload_details .file_status{
	width:10em;
	text-align:right;
}

#cloud-file-uploader #file_upload_details .file_name{
	text-align:left;
}

#cloud_media_file{
	display:none;
}

#cloudProgress {
	width: 80%;
	margin:auto;
	padding-top:1rem;
}

#cloudBar {
  width: 0%;
  max-width:100%;
  height: 1rem;
  background-color: green;
}

/************************************************************
 * 		Other cloud
 * **********************************************************/
 
 .dDialog .cloud.close_button{
	position: absolute;
	right: 0;
	z-index: 2;
}

 .dDialog .cloud.close_button img{
	height:2em;
	margin: .5em .5em 0 0;
}

 .dDialog .cloud.close_button img:hover {
	cursor:pointer;
}

/************************************************************
*                  Chat		                                 *
************************************************************/
#chat{
	max-width:50rem;
	margin:auto;
	background-color: lightgray;
	border: gray .2rem solid;
	padding: 5px;
}
#chat .chat_header{
	width:100%;
}
#chat .chat_header .title{
	display:inline-block;
	max-width:80%;	
}
#chat .chat_header .title h1{
	margin-top:0;
}

#chat .chat_header .close{
	display:inline-block;
}
#chat .chat_header .close:hover{
	cursor:pointer;
}
#chat .chat_header .close img{
	height:2rem;
	vertical-align: super;
}
#chat .buttons{
	float:right;
}
#chat .buttons .newChat img{
	height:2.5rem;
	margin-right:2rem;
}
#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;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image:none;
}

#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: lightgray;
	border: gray .2rem solid;
	padding: 5px;
	max-width:67rem;
	margin:auto;
}
#address_list .btn.close{
	position:relative;
	float:right;
	z-index:2
}

#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_list_header{
	padding-left: 1rem;
	font-weight: bold;
	background-color:#eee;
}
#address_list .address_header .title{

}

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

#address_list .address_header .buttons .btn{
	margin:0 1rem 1rem 1rem;
	text-decoration:none;
}

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

#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 .deleted{
	display:none;
}

#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{
	margin-left:1rem;
	border-bottom: 1px solid gray;
}

#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");
}

/************************************************************
*                  Administration                              
************************************************************/
#administration .admin{
	display:none;
}
#administration .sheet.userdata .userlist .deleted{
	display:none;
}

#administration .sheet.userdata .buttons .btn{
	margin:.5rem;
}
#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){
	/*****************************************************
	 * 				Header
	 * ***************************************************/
	 
	 #header .banner .title.center{
		text-align:center;
		vertical-align: middle;
		font-size: 1.4rem;
		width:20rem;
	}
	#header .banner .title.right{
		width:16rem;
		vertical-align: middle;
		width:0;
	}
	#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%;
	}
	
}