html, body { background:none; margin:0px; padding:0px; height:100%; font-family:sans-serif, serif; background:#EEE; }
body { overflow-y: auto;  }
a { text-decoration: none; color: #174776;  }

.relative { position: relative; display: inline-block; }
.red { color:#A00; }
.green { color:#060; }

.UserName { font-weight: bold; color: #060; }
.Button { border:1px solid #6A6; border-radius:4px; transition:all 200ms; text-align:center; cursor:pointer; background: rgb(45,155,50); display: block; line-height: 20px; padding:3px 10px; box-sizing: border-box; font-size:14px; color:#222; width: 200px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2f3d5+0,ddecd0+100 */
background: #e2f3d5; /* Old browsers */
background: -moz-linear-gradient(top,  #e2f3d5 0%, #ddecd0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e2f3d5 0%,#ddecd0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e2f3d5 0%,#ddecd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f3d5', endColorstr='#ddecd0',GradientType=0 ); /* IE6-9 */
}
.Button:active, .Button:hover { background: #F7FFF7; border-color: #060; }
.Button.Disabled, .Button.Disabled:active, .Button.Disabled:hover { background: #EEE; border-color:#CCC; }
.Button > span { display: inline-block;  vertical-align: middle; }


.mmlbutton { text-align: center; border:1px solid #080; border-radius: 20px; background: #dfefd2; padding:20px 8px; width: auto; box-sizing:border-box; font-weight: bold; }
.mmlprofile { background-color: #FFF; display: block; width:36px; height:36px; border-radius: 50%; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.mmlprofile.album { border-radius: 5px; }  
   

.lazyloading { position: relative; }
.lazyloading::before{
  content: "";
  position: absolute;
  top:50%; left:50%;
  width:40px;
  height:40px;
  border: 4px solid transparent;
  border-top-color: #CCC;
  border-bottom-color: #CCC;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
  opacity: 0.5;
}

.InlineCountryImage { display: inline-block; vertical-align: text-top; margin-right: 5px; padding-top: 1px; width:14px; height: 14px; background-repeat: no-repeat; background-size: contain; background-position: center center; }

@keyframes spin {  
    from {transform:translate(-50%,-50%) rotate(0deg);}
    to {transform:translate(-50%,-50%) rotate(360deg);}
}
  
.PhotoBackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: url('/images/world-map-background.jpg'); background-position: center center; background-size:cover; background-repeat: no-repeat; }

.LoginDiv { width:100%; }
.LoginDiv h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 110%; display: block; text-align: center; }
.LoginDiv hr { margin: 15px 0px; opacity: 0.2; }
.LoginDiv input, .LoginDiv select, .LoginDiv textarea { padding:10px; border:1px solid #222; background: rgba(255,255,255,0.6); border-radius:20px; width:100%; box-sizing: border-box; }
.LoginDiv .LoginButton { border:1px solid #000; border-radius:4px; text-align:center; cursor:pointer; background: rgb(45,155,50); display: block; padding: 10px; box-sizing: border-box;
background: -moz-linear-gradient(top, rgba(45,155,50,1) 0%, rgba(13,97,13,1) 100%);
background: -webkit-linear-gradient(top, rgba(45,155,50,1) 0%,rgba(13,97,13,1) 100%);
background: linear-gradient(to bottom, rgba(45,155,50,1) 0%,rgba(13,97,13,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d9b32', endColorstr='#0d610d',GradientType=0 ); font-size:14px; font-weight:bold; color:#FFF; width: 100%;  text-shadow:2px 2px 4px rgba(0,0,0,0.4); }
.LoginDiv .Message { display: block; padding: 10px; color: #0A0; line-height: 22px; }
.LoginDiv .Message.Error { color: #A00; }
.LoginDiv label { position: absolute; text-align: left; left:10px; top: 50%; transform: translate(0, -50%); color: #444; pointer-events: none; transition: all 100ms; padding: 2px; }  
.LoginDiv select + label, .LoginDiv input:focus + label, .LoginDiv input.Filled + label, .LoginDiv textarea:focus + label, .LoginDiv textarea.Filled + label, .LoginDiv input[type="date"] + label { left:16px; top:-14px; color: #888; letter-spacing: 0.5px; }
.LoginDiv .HomeText { padding:10px 20px 30px 20px; display: block; font-size: 16px !important; line-height: 24px; }
.LoginDiv .Form > span { display: block; margin-bottom: 15px; }
.CenterScreen { position: absolute; left: 50%; top:50%; box-sizing: border-box; padding: 20px; width: 400px; border-radius: 5px; background: #FFF; transform: translate(-50%, -50%); box-shadow: 3px 3px 6px rgba(0,0,0,0.2); }
   

.MainBar { position:fixed; z-index: 100000; top: 0px; left: 0px; right: 0px; border-bottom: 1px solid #060; height: 48px;
background: -moz-linear-gradient(top, rgba(125,196,128,0.95) 0%, rgba(28,147,28,0.95) 100%);
background: -webkit-linear-gradient(top, rgba(125,196,128,0.95) 0%,rgba(28,147,28,0.95) 100%);
background: linear-gradient(to bottom, rgba(125,196,128,0.95) 0%,rgba(28,147,28,0.95) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dc480', endColorstr='#1c931c',GradientType=0 ); }
.MainBar .tbl { display: table; width: 100%; table-layout: fixed; height: 48px; max-width: 1400px; margin: auto; }
.MainBar .tbl > * { display: table-cell; vertical-align: middle; position: relative; }
.MainBar .tbl input { width:100%; padding: 6px; border: 1px solid #888; border-radius: 5px; background: rgba(255,255,255,0.5); transition: all 200ms; box-sizing: border-box; }
.MainBar .Title { width:200px; padding: 14px; color: #FFF; font-size: 20px; padding: 10px; font-weight: bold; text-shadow: 2px 2px 5px rgba(0,0,0,0.2); }
.MainBar .Search { width:500px; }
.MainBar .tbl > *:last-child { width:300px; }
.MainBar .Search .icon-search { position: absolute; right: 8px; top: 50%; transform: translate(0, -50%); color: #666; pointer-events: none; }
.MainBar .Search .SearchResults { display: none; position: absolute; left: 1px; right: 1px; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); background: #FFF; }
.MainBar .Search.InSearch input { border-radius: 5px 5px 0px 0px; }
.MainBar .Search.InSearch .icon-search { color: #050; }
.MainBar .Search.InSearch .SearchResults { display: block; }
.MainBar .Search a { display: table; table-layout: fixed; width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px; font-size: 90%; border-bottom: 1px solid #EEE; } 
.MainBar .Search a:last-child { border: none; }
.MainBar .Search a > * { display: table-cell; box-sizing: border-box; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }
.MainBar .Search a > *:first-child { width: 60px; } 
.MainBar .Search a .Icon { display: block; width: 40px; height: 40px; margin-left: 5px; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); border-radius: 50%; margin-right: 5px; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.MainBar .Search a .Name { font-size: 90%; color: #222; font-weight: bold; }
.MainBar .Search a .Date { margin-top: 4px; font-size: 80%; color: #888; display: block; overflow: hidden; text-overflow:ellipsis; }
.MainBar .Search a:hover { background:#9BFA9D; }

.MainBar .MainButton { display: inline-block; float: right; border-right: 1px solid rgba(0,0,0,0.2); font-size:24px; color: #000; opacity: 0.6; position: relative; vertical-align: middle; padding-right: 15px; margin-right: 15px; cursor: pointer; text-align: center;text-shadow: inset 0px 0px 4px rgba(255,255,255,0.3); }
.MainBar .MainButton:last-child { border-left: 1px solid rgba(0,0,0,0.2); padding-left: 15px; }
.MainBar .RegisterLogin { text-align: right; padding-right: 5px; }
.MainBar .RegisterLogin > a { display: inline-block; padding: 10px; color: #FFF; margin: 4px; font-weight: bold; }
.MainBar .RegisterLogin > a:last-child { padding: 6px 10px; border-radius: 5px; background: #FFF; color:#000; font-size: 90%; }

.MainBar .Settings { display: inline-block; float: right; }
.MainBar .Settings .Logo { cursor:pointer; text-shadow:2px 2px 3px rgba(0,0,0,0.2); font-size: 16px; color: #FFF; margin-right: 8px; float: right; }     
.MainBar .Settings .Logo > span { display: inline-block; vertical-align: middle; }
.MainBar .Settings .Icon { margin-left: 5px; width: 28px; height: 28px; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); background: #FFF; border-radius: 50%; margin-right: 5px; background-size:cover; background-position:center center; background-repeat:no-repeat;  }
.MainBar .AccountMenu { display: none; position: absolute; top: 46px; right: 10px; padding: 8px 0px; background: #FFF; width: 250px; box-shadow: 3px 3px 6px rgba(0,0,0,0.2); border-radius:0px 0px 5px 5px; border: 1px solid #555; }
.MainBar .AccountMenu:after { content: ''; position: absolute; top: -6px; right: 12px; width:10px; height: 10px; background: #888; transform: rotate(45deg); border-left: 1px solid #555; border-top: 1px solid #555; }
.MainBar .AccountMenu.Messages:after { right: 170px; }  
.MainBar .AccountMenu.Notifications:after { right: 116px; } 
.MainBar .AccountMenu hr { opacity: 0.2; margin: 10px 0px; height:1px; }  
.MainBar .AccountMenu > a, .MainBar .AccountMenu > span { display: block; text-align: left; padding: 8px 20px; font-size: 90%; transition: all 200ms; }
.MainBar .AccountMenu > a.Link:hover { background: #CEF; }
.MainBar .AccountMenu > span { font-size: 84%; }
.MainBar .AccountMenu > span .label { font-weight: bold; display: inline-block; width: 40%; margin-right: 5px; text-align: right; }
.MainBar .AccountMenu .Upload { text-align: center; font-size: 80%; padding: 2px; border: 1px solid #000; margin: 5px 20px 20px 20px; width: auto; box-sizing:border-box; }
.MainBar .AccountMenu .Head { display: block; text-align: center; font-size: 80%; margin-top:-8px; font-weight: bold; color: #FFF; text-shadow:1px 1px 3px rgba(0,0,0,0.3); border-bottom: 1px solid #DDD; background: #888; }
.MainBar .AccountMenu .Member { display: block; text-align: center; font-size: 90%; color: #444; margin-top: 10px; }
.MainBar .Settings.Selected .AccountMenu { display: block; }      
       
.MainBar .WebsiteLogo { position: absolute; top: 3px; }


.MainPanel { position: relative; padding-top: 48px; }
.MainPanel .TableLayout { display:table; table-layout:fixed; width:100%; box-sizing:border-box; padding: 25px 0px; max-width: 1400px; margin: auto; }
.MainPanel .TableLayout > * { display:table-cell; vertical-align:top; width:100%; position:relative; }
.MainPanel .TableLayout > *:first-child { width:28%; min-width: 200px;  }
.MainPanel .TableLayout > *:last-child { padding:0px 0px 0px 20px; font-size: 15px; }  
.MainPanel .TableLayout .Content > div { display: block; background-color: #FFF; margin-bottom:20px; border-radius: 5px; }
.MainPanel .TableLayout .Menu { display: block; width:100%; box-sizing: border-box; position: relative; margin-bottom: 20px; }
.MainPanel .TableLayout .Menu.NoPad { padding: 0px; }
.MainPanel .TableLayout .Account { display: table; table-layout: fixed; width: 100%; box-sizing: border-box; padding:8px 0px; }
.MainPanel .TableLayout .Account.Button { padding: 6px; background: #FCFCFC; color: #146714; font-size: 90%; border-radius: 0px 0px 5px 5px; text-align: left; }
.MainPanel .TableLayout .Account.Button .icon-plus { font-size: 90%; display: block; text-align: center; }
.MainPanel .TableLayout .Account:last-child { border: none; }  
.MainPanel .TableLayout .Account > * { display: table-cell; box-sizing: border-box; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }
.MainPanel .TableLayout .Account > *:first-child { width:50px; } 
.MainPanel .TableLayout .Account > *:nth-child(3) { width: 20px; text-align: right; padding-right: 12px; color: #AAA; } 
.MainPanel .TableLayout .Account > *:nth-child(3) > a { display: inline-block; vertical-align: middle; cursor: pointer; }
.MainPanel .TableLayout .Account .mmlprofile { margin-right: 5px; }
.MainPanel .TableLayout .Account .Name { padding-top: 1px; font-size: 90%; }
.MainPanel .TableLayout .Account .Date { margin-top: 6px; font-size: 80%; color: #444; display: block; }
.MainPanel .TableLayout .Timeline {position: relative; display: block; width: 100%; padding: 10px 20px; box-sizing: border-box; }
.MainPanel .TableLayout .Timeline .Data { position: relative; padding-top: 70px; padding-bottom:50px; }
.MainPanel .TableLayout .Timeline .Button { position: absolute; top: 5px; right: 5px; font-size: 80%; padding: 1px 5px; width: auto; }
.MainPanel .TableLayout .Timeline .Button .icon-calendar { font-size: 12px; margin-right: 5px; }


.MainPanel .TableLayout .CollectionHead { position: relative; display: block; width: 100%; box-sizing: border-box; }
.MainPanel .TableLayout .CollectionHead.File {  border: 2px dashed #666; padding: 30px; }
.MainPanel .TableLayout .CollectionHead .Header { text-align: center; position: relative; }   
.MainPanel .TableLayout .CollectionHead .NavButton { display: inline-table; table-layout: fixed; width: 30%; font-size: 88%;  }
.MainPanel .TableLayout .CollectionHead .NavButton > span { display: table-cell; vertical-align: middle; }
.MainPanel .TableLayout .CollectionHead .NavButton .Btn { padding:0px 8px; }
.MainPanel .TableLayout .CollectionHead .NavButton .Icon { width: 34px; height: 34px; border: 1px solid #CCC; border-radius: 50%; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.MainPanel .TableLayout .CollectionHead .NavButton .Action { display: block; font-weight: bold; font-size: 95%; }
.MainPanel .TableLayout .CollectionHead .NavButton .Name { display: block; margin-top: 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.MainPanel .TableLayout .CollectionHead .NavButton .Title { font-size: 110%; }
.MainPanel .TableLayout .CollectionHead .NavButton .Date {display: block; margin-top: 3px; opacity: 0.8; font-size: 85%; }
.MainPanel .TableLayout .CollectionHead .NavButton.Left, .MainPanel .TableLayout .CollectionHead .NavButton.Right { position: absolute; top: 50%; transform: translate(0,-50%); max-width: 30%; overflow:hidden; white-space:nowrap; }
.MainPanel .TableLayout .CollectionHead .NavButton.Left { left:0px; text-align: left; }
.MainPanel .TableLayout .CollectionHead .NavButton.Right { right:0px; text-align: right; }
  
.MainPanel .TableLayout .CollectionHead .Settings { display: block; margin: auto; text-align: center; }
.MainPanel .TableLayout .CollectionHead .Settings > span { display: inline-block; vertical-align: middle; }
.MainPanel .TableLayout .CollectionHead .Settings .icon-add_a_photo { font-size: 28px; color: #888; margin-right: 10px;padding-bottom: 6px; }
.MainPanel .TableLayout .CollectionHead .Settings .line { display: block; text-align: center; margin-bottom: 10px; }
.MainPanel .TableLayout .CollectionHead .Settings .line.title { font-weight: bold; font-size: 120%; }
.MainPanel .TableLayout .CollectionHead .Settings .progressbar { display: block; background: #AAA; width:400px; height: 12px; position: relative; border-radius: 5px; overflow: hidden; }
.MainPanel .TableLayout .CollectionHead .Settings .progressbar .progress { position: absolute; left: 0; top: 0; bottom: 0; transition: all 300ms; background: #37a038; }

.CollectionHead.Markers { display:flex !important;; align-content: stretch; align-items: stretch; }
.CollectionHead.Markers > * { flex: 1; overflow: hidden; position: relative; }
.CollectionHead.Markers > *:last-child { background: #FFF; padding:20px; flex: 0.7; overflow: auto; border-radius: 0px 5px 5px 0; height: 400px; }
.CollectionHead.Markers .map { position: absolute; top:0; left:0; right:0; bottom:0; }
.CollectionHead.Markers .title { display: block; font-weight: bold; font-size: 110%; margin-bottom: 10px; }
.MarkerContent > * { display: block; padding:10px; background: #F0F0F0; border-radius: 5px; cursor: pointer; margin-bottom:20px; }
.MarkerContent .selected { background: #CEF; }
.MarkerContent .head { display: block; text-align: right; font-size: 90%; margin-bottom: 10px; }
.CollectionHead.Markers .btn { color: #444; cursor: pointer; line-height: 20px; }
.CollectionHead.Markers .btn > * { display: inline-block; vertical-align: middle; }
.CollectionHead.Markers .btn > *:first-child { margin-right: 5px; font-size: 11px; padding-bottom: 2px; }
.CollectionHead.Markers .add { display: block; margin-bottom: 20px; }


.CollectionHead .Search { background: #FFF; border: 1px solid #CCC; }
.CollectionHead .Search .Res { display: block; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; padding: 7px; cursor: pointer; text-overflow:ellipsis; border-bottom: 1px solid #EEE; }
.CollectionHead .Search .Res:last-child { border:none; }
.CollectionHead .Search .Res:hover { background: #CEF; }


.inputrow { display: block; margin-bottom: 10px; position: relative; }
.inputrow input { width: 100%; border:1px solid #EEE; border-radius: 4px; padding:8px; box-sizing: border-box; }
.inputtable { display: block; column-count: 2; gap:10px; margin-bottom: 10px; }
.inputtable .inputrow, .inputtable:last-child { margin-bottom: 0px; }

.MainPanel .TableLayout .Menu .Title { display: block; padding:12px 0px; color: #222; z-index:50; bottom: auto !important; font-weight: bold; }
.MainPanel .TableLayout .Menu .Instruction { font-size: 80%; color: #888; padding: 10px; line-height: 20px; text-align: center; border-bottom: 1px solid #EEE; display: block; }
.MainPanel .TableLayout .Menu .Avatar { width:100%;background-color: #FFF; background-size:cover; background-position:center center; position:relative; display: block; }
.MainPanel .TableLayout .Menu .Avatar .Name { position:absolute; left:0px; right:0px; bottom:0px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); color:#333; text-shadow:0px 0px 3px rgba(255,255,255,0.8); padding:15px 3px 6px 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; text-align:center; letter-spacing:0.5px; font-weight:bold; }

.MainPanel .TableLayout .Intro { line-height: 22px; font-size: 85%; }
.MainPanel .TableLayout .Intro .Title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 110%; color: #222; }

.MainPanel .TableLayout .AlbumMenuHeader .Name { font-size: 90% !important; font-weight: bold; }

    

.MainPanel .TableLayout .Menu .Avatar .UpdateCover { position: absolute; top: 7px; left: 7px; cursor: pointer; box-sizing: border-box; }
.MainPanel .TableLayout .Menu .Avatar .UpdateCover > span { display: inline-block; padding: 4px; vertical-align: middle; }
.MainPanel .TableLayout .Menu .Avatar .UpdateCover > span:first-child { font-size: 13px; font-size: 16px; color: #222; text-shadow:0px 0px 3px rgba(255,255,255,0.8); cursor: pointer; transition: all 100ms; }
.MainPanel .TableLayout .Menu .Avatar .UpdateCover .Title { display: none; font-size: 13px; padding-left: 2px; padding-right: 8px; }
.MainPanel .TableLayout .Menu .Avatar:hover .UpdateCover, .MainPanel .TableLayout .Menu .Avatar.Empty .UpdateCover { background:rgba(255,255,255,0.8); border: 0.2px solid #222; border-radius: 4px; top:6px; left: 6px; box-shadow: 2px 2px 6px rgba(255,255,255,0.6); }
.MainPanel .TableLayout .Menu .Avatar:hover .UpdateCover > span:first-child, .MainPanel .TableLayout .Menu .Avatar.Empty .UpdateCover > span:first-child { transform:scale(0.8, 0.8); }
.MainPanel .TableLayout .Menu .Avatar:hover .UpdateCover .Title, .MainPanel .TableLayout .Menu .Avatar.Empty .UpdateCover .Title { display:inline-block; }
.MainPanel .TableLayout .Menu .Avatar.Empty .UpdateCover { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.MainPanel .TableLayout .Menu .Avatar > div { position: absolute; left: 0px; right: 0px; top: 0px; background: rgba(0,0,0,0.4); }
.MainPanel .TableLayout .Menu .Avatar .Percentage { position: absolute; left: 0px; right: 0px; text-align: center; top: 50%; margin-top: -10px; color: #FFF; font-size: 18px; }

.Worldmap .World { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #CEF; }
.Worldmap .Locations { position: absolute; left:0px; right: 0px; bottom: 0px; padding:4px; font-size: 80%; line-height: 20px; text-align: center; color: #FFF; background:rgba(0,0,0,0.5); }
.Worldmap .Button { position: absolute; top: 5px; right:5px; font-size: 80%; padding: 1px 5px; width: auto; z-index: 100; }
.Worldmap .Button .icon-earth { font-size: 12px; margin-right: 5px; }
  
.MainPanel .Menu.Worldmap { padding: 0px !important; overflow: hidden; }
.MainPanel .Menu .Worldmap { position: relative; border-bottom: 1px solid #EEE; }


.MainPanel .TableLayout .Menu .MenuItems { padding:0px 10px 10px 10px; position:absolute; top:132px; bottom:0px; left:0px; right:0px; overflow-y:auto; }
.MainPanel .TableLayout .Menu .MenuItems .Item { cursor:pointer; transition:all 300ms; display:block; text-decoration:none; color:#222; margin-bottom:6px; font-size:13px; padding:3px; box-sizing:border-box; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#F8FAFF; border:1px solid #DDD; border-radius:3px; }
.MainPanel .TableLayout .Menu .MenuItems .Item:hover { border-color:#AAA; background:#FFF; }
.MainPanel .TableLayout .Menu .MenuItems .TimelineItem { font-size:12px; margin:14px 0px 10px 0px; text-align:center; color:#222; display:block; position:relative; }
.MainPanel .TableLayout .Menu .MenuItems .TimelineItem:after { content:''; position:absolute; left:-10px; right:-10px; height:1px; bottom:-2px; background:#EEE; }
.MainPanel .TableLayout .Menu .AddBTN { position:absolute; right:5px; top:5px; }

.MainPanel .TableLayout .AlbumOptions .Row { display: table; table-layout: fixed; width: 100%; border-collapse: collapse; position: relative; }
.MainPanel .TableLayout .AlbumOptions .Row > * { display: table-cell; width:100%; vertical-align: middle;  box-sizing: border-box; }
.MainPanel .TableLayout .AlbumOptions .Row.ValueRow > *:first-child { position: relative; }
.MainPanel .TableLayout .AlbumOptions input, .MainPanel .TableLayout .AlbumOptions select, .MainPanel .TableLayout .AlbumOptions textarea { margin: 0px; max-width: 100%; min-width: 100%; width:100%; display: block; padding:20px 4px 4px 4px; resize:none; box-sizing: border-box; border:1px solid #CCC; border-radius: 4px; font-size: 13px; }
.MainPanel .TableLayout .AlbumOptions select { padding:18px 2px 4px 2px; }
.MainPanel .TableLayout .AlbumOptions textarea { height:80px; padding-top: 28px; }
.MainPanel .TableLayout .AlbumOptions input[type="date"] { font-size:14px; padding: 18px 2px 2px 2px; max-width: 160px; width: 160px; min-width: 160px; }
.MainPanel .TableLayout .AlbumOptions .Row.ValueRow label { position: absolute; font-size: 13px; left: 5px; top: 50%; transform: translate(0,-50%); color: #AAA; }
.MainPanel .TableLayout .AlbumOptions input:focus + label, .MainPanel .TableLayout .AlbumOptions input.Filled + label, .MainPanel .TableLayout .AlbumOptions input[type="date"] + label, .MainPanel .TableLayout .AlbumOptions select + label, .MainPanel .TableLayout .AlbumOptions textarea:focus + label, .MainPanel .TableLayout .AlbumOptions textarea.Filled + label { font-size: 11px !important; transform: none !important; top: 4px !important; color: #00A !important; }
.MainPanel .TableLayout .AlbumOptions .Button { display: block; width: 100%; font-size: 12px; text-align: center; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 1px solid #0A0; border-radius: 4px; padding: 4px; box-sizing: border-box; cursor: pointer; margin-top: 5px; background:#29A229; font-weight: bold; color: #FFF; text-shadow:1px 1px 3px rgba(0,0,0,0.1); }




.AlbumOptions { display: block; }
.AlbumOptions .Field { cursor: pointer; }
.AlbumOptions .Info { display: table; width: 100%; table-layout: fixed; margin-bottom: 15px; }
.AlbumOptions .Info:last-child { margin-bottom: 0px; }
.AlbumOptions .Info .DateSeparate { display: inline-block; vertical-align: bottom; }
.AlbumOptions .Info > span { display:table-cell; vertical-align: top; font-size: 90%; }
.AlbumOptions .Info > span:nth-last-child(2) { width:40px; text-align: center; }
.AlbumOptions .Info > span:nth-child(2) { padding-right: 10px; }
.AlbumOptions .Info.Date > span:last-child { font-size: 13.3px; }
.AlbumOptions .Info .Empty { color: #AAA; font-style:italic; cursor: pointer; }
.AlbumOptions .Info .Description { text-align: left !important; font-size: 110% !important; display: block; }
.AlbumOptions .Info .Location { display: block; margin-top:6px; border-bottom: 1px solid #DDD; padding-bottom: 6px; }
.AlbumOptions .Info .Location:first-child { margin-top: 0px; }
.AlbumOptions .Info .Location:last-child { padding-bottom: 0px; border-bottom:none; }
.AlbumOptions .Info .Location .Delete { float: right; color: #A00; opacity: 0.3; }
.AlbumOptions .Info .Location .Delete:hover { opacity: 1; }
.AlbumOptions .Info.Delete { color: #A00; font-size: 80%; margin-top: -3px; }

.PicturePreview .FullImage { display: block; top:0px; left:0px; right:0px; bottom: 0px; }
.PicturePreview .FullImage > span { position: absolute; top:0px; left:0px; right:0px; bottom: 0px; }
.PicturePreview .FullImage > span:last-child { border: 1px solid #FFF; left: 90%; }
.PicturePreview .FullImage > span:first-child { display:none; right: 10%; }
.PicturePreview .LeftMenu, .PicturePreview .LeftDataMenu { display:none; }

.BlackBox { position: fixed; line-height: 0px; top: 48px; left: 0px; right:0px; bottom: 0px; background: rgba(0,0,0,0.5); z-index: 999; }
.PicturePreview { position: fixed; line-height: 0px; top: 70px; left: 20px; right:20px; bottom: 20px; overflow:hidden; background: #FFF; box-shadow: 3px 3px 5px rgba(0,0,0,0.4); z-index: 1000; border: 2px solid #FFF; }
.PicturePreview .LeftPage { position:absolute; left:0px; top:0px; right:50%; bottom:0px; }
.PicturePreview .RightPage { position:absolute; left:50%; top:0px; right:0px; bottom:0px; }
.PicturePreview .Arrow { position:absolute; top:50%; right:20px; transform:translate(0,-50%); opacity:0.2; transition:all 400ms; z-index: 100; }
.PicturePreview .LeftPage .Arrow { transform:rotate(180deg); left:20px; }
.PicturePreview .LeftPage:hover .Arrow { opacity:0.8; left:5px; }
.PicturePreview .RightPage:hover .Arrow { opacity:0.8; right:5px; }
.PicturePreview .FullImage > span:first-child { display: table-cell; } 
.PicturePreview .DisplayImage { width:100%; display: block; opacity: 0.5; border-right: 0px; border-top: 0px; }
.PicturePreview .DisplayImage:hover {  opacity: 1; }
.PicturePreview .DisplayImage > div:hover { transform:none; box-shadow:none; border-color:#CCC; }
.PicturePreview .DisplayImage.Active { opacity: 1;  }
.PicturePreview .DisplayImage.Active > div { box-shadow: inset 0px 0px 3px rgba(0,0,0,0.8), inset 0px 0px 10px rgba(255,255,255,0.8); }
.PicturePreview .DisplayImage img { width: 100%; }
.PicturePreview .ImageSlider { display: block; transition: all 200ms; position: absolute; width:100%; top:0px; left:0px; }
.PicturePreview .ImageSlider .DisplayImage { position: relative; padding-bottom: 80%; background-size:cover; background-position:center center; background-repeat:no-repeat;box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); }
.PicturePreview .ImageSlider .DisplayImage .Icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 101; width: 50%; max-width: 100px; }
.PicturePreview .LeftMenu { display:block; position: absolute; top:10px; left: 14px; }
.PicturePreview .RightMenu { display:block; position: absolute; top:10px; right: 14px; }
.PicturePreview .DiaMenu { z-index: 100; }
.PicturePreview .DiaMenu span[data-editmode="0"] { display: block; }
.PicturePreview .DiaMenu span[data-editmode="1"] { display: none; }
.PicturePreview.EditMode .DiaMenu span[data-editmode="0"] { display: none; }
.PicturePreview.EditMode .DiaMenu span[data-editmode="1"] { display: block; }
.PicturePreview .DiaMenu .Button { text-align: center; transition: all 200ms; white-space: nowrap; overflow: hidden; display: block; padding: 9px; width: 35px; line-height: 14px; box-sizing: border-box; border:1px solid #AAA; color: #444; border-radius: 50%; background: #FFF; font-size: 14px; margin-bottom: 12px; opacity: 0.5; }
.PicturePreview .DiaMenu .Button > span { display: inline-block; vertical-align: middle; }
.PicturePreview .DiaMenu .Button > span:first-child { font-size: 15px; }
.PicturePreview .DiaMenu .Button > span:last-child { display: none; margin-left: 5px; }
.PicturePreview .DiaMenu .Button:hover { border-radius: 10px; width:150px; opacity: 1; text-align: left; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.PicturePreview .DiaMenu .Button:hover > span:last-child { display: inline-block; }
.PicturePreview .RightMenu .Button { float: right; clear: both; }

.PicturePreview .LeftDataMenu { display:block; position: absolute; bottom:10px; left: 10px; }
.PicturePreview .LeftDataMenu > span { transition: all 200ms; white-space: nowrap; overflow: hidden; display: inline-block; padding: 5px; padding-right:8px; box-sizing: border-box; border:1px solid #AAA; color: #444; border-radius:6px; background: #FFF; font-size: 14px; margin-right: 6px; opacity: 0.5; }
.PicturePreview .LeftDataMenu > span > span { display: inline-block; vertical-align: middle; }
.PicturePreview .LeftDataMenu > span > span:first-child { font-size: 15px; }
.PicturePreview .LeftDataMenu > span > span:last-child { margin-left: 5px; }
.PicturePreview .LeftDataMenu > span:hover { opacity: 1; }

.PicturePreview.EditMode .LeftPage, .PictureOverview.EditMode .RightPage { display: none; }
.PicturePreview.EditMode .LeftDataMenu { display: none; }

.PicturePreview .SlideShow { position: absolute; left:0px; right:0px; top:0px; bottom: 0px; display:block; width: 100%; }
 

.PicturePreview .edit { position:absolute; left:0px; top:0px; right:0px; bottom:0px; }
.PicturePreview .edit .crop { transition: all 20ms; position:absolute; left:0px; top:0px; border: 3px solid rgba(100,150,250,0.9); z-index: 1000; background:rgba(100,150,250,0.2); box-sizing:border-box; }
.PicturePreview .edit .crop > span { transition: all 100ms; position:absolute; width: 16px; height: 16px; box-sizing: border-box; border:2px solid rgba(100,150,250,0.9); background: #FFF; transform: translate(-50%, -50%); }
.PicturePreview .edit .crop > span:hover { transform:translate(-50%, -50%) scale(1.4, 1.4); }
.PicturePreview .edit .crop > .c1 { top: 0px; left: 0px; }
.PicturePreview .edit .crop > .c2 { top: 0px; right: -16px; }
.PicturePreview .edit .crop > .c3 { bottom: -16px; left:0px; }
.PicturePreview .edit .crop > .c4 { bottom: -16px; right: -16px; }

.PicturePreview, .Button, .noselect, .NoSelect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
	cursor:pointer;
}

@keyframes PhotoLoaded {
  0% {
    transform: scale(0.1,0.1) translateZ(0);
  }
  100% {
    transform: scale(1,1) translateZ(0);
  }
}

.LoadAnimation { position:absolute; bottom:10px; left:50%; transform:translate(-50%,-50%); display:none; font-family: serif; }
.LoadAnimation > span { font-size:130px; margin: 0px 10px 0px 10px; opacity:0.7; display:inline-block; color:#EEE; text-shadow:0px 0px 5px rgba(0,0,0,0.1); vertical-align:bottom; width:8px; height: 8px; background: #FFF; border-radius:50%; text-align:center; animation:typinganimation 1.5s infinite ease-in-out; }
.LoadAnimation > span:nth-child(2){ animation-delay:50ms; }
.LoadAnimation > span:nth-child(3){ animation-delay:250ms; }
.LoadAnimation > span:nth-child(4){ animation-delay:450ms; }
@-webkit-keyframes typinganimation {
    0% {
        transform:translateY(0px);
    }
    20% {
       	transform:translateY(-10px);
		opacity:1;
    }
    60% {
        transform:translateY(0px);
    }
}


.hidden { display:none !important; }


.Timeline .Line { box-sizing: border-box; position: relative; display: table; width: 100%; table-layout: fixed; margin: auto; height: 10px; z-index: 100; }
.Timeline .CenterLine { position: absolute; height: 2px; left: 0px; right: 0px; background: #DDD; margin-top: 4px; }
.Timeline .markerlabel { display: table-cell; color: #222; z-index: 200; vertical-align: middle; font-weight: bold; font-size: 11px; transform: translateZ(0); text-align: center; width:8.77%; border-left:3px solid #222; }
.Timeline .markerlabel:first-child{ border-left: none; } 
.Timeline .markerlabel > span { position: absolute; z-index: 100; left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: 0; color: #050; font-size: 9px; padding:1px 5px; background: rgba(255,255,255,0.7); border-radius: 5px; }

.Timeline .event { cursor: pointer; width:4px; margin-left: -2px; height:4px; background:#C55; border-radius: 50%; margin-top:3px; position:absolute; background:none; box-sizing:border-box; z-index: 40;  transform: translateZ(0); -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; shape-rendering:crispEdges; }
.Timeline .event .eventThumb { transform-origin:50% 50%; z-index: 400; text-decoration: none; color: #222; cursor: pointer; border-radius: 4px; display:block; white-space: nowrap; position: absolute; transform: translate3d(-50%, -100%, 0) perspective(1px); top: -20px; left: 50%;  -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; shape-rendering:crispEdges; }
.Timeline .event .eventThumb img { border-radius: 4px; position:relative; height:40px; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); display:inline-block; vertical-align:top; box-sizing:border-box; cursor:pointer; }
.Timeline .event .eventThumb .Title { vertical-align: middle; font-size: 10px; max-width: 90px; max-height: 40px; white-space: normal; overflow:hidden; margin-right: 5px; display: none;  -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; shape-rendering:crispEdges; }
.Timeline .event .eventThumb .InlineCountryImage { transform: translate(-49%,-49%); border-radius: 50%; box-shadow: inset 0px 0px 2px rgba(0,0,0,0.6); }
.Timeline .event:before { content:''; position: absolute; width:1px; left: 50%; margin-left: -0.5px; background: #AAA; bottom: 3px; top: -20px; z-index: 10; }
  
.Timeline .event.Small40 .eventThumb { top: -15px; }
.Timeline .event.Small20 { background:#AAA; opacity: 0.8; }  
.Timeline .event.Small20:before { top: -13px; }
.Timeline .event.Small20 .eventThumb { top: -13px; }

.Timeline .event.Selected { z-index: 50; background:#181; height: 6px; width: 6px; margin-left: -3px; margin-top: 2.5px; }
.Timeline .event.Selected:before { background: #181; }     

.Timeline .event .eventThumb:hover { opacity: 1; }

.Timeline .event.double { z-index: 2; }
.Timeline .event.double .eventThumb{ top: -90px; }
.Timeline .event.double:before{ top: -90px; z-index: 1;  }

.Timeline .event.double.Small20 .eventThumb { top: -47px; }
.Timeline .event.double.Small20:before { top: -47px; }

.Timeline .event.alt{ margin-top:3px; }
.Timeline .event.alt .eventThumb { transform: translate3d(-50%, 0, 0) perspective(1px); margin-top:17px; top: auto; }
.Timeline .event.alt:before { top: 3px; bottom: -17px;  }   

.Timeline .event.alt.double .eventThumb{ bottom: -143px; }
.Timeline .event.alt.double:before{ bottom: -92px; z-index: 1; }

.Timeline .event.Collapsed .eventThumb { display: none; }
.Timeline .event.Collapsed:before { display: none; }
.Timeline .event:hover { z-index: 45; }


.Timeline .trip { height:4px; margin-left: 0px; border-radius: 4px; background:#181; }                                
  


  
.FullMap .World { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #CEF; }
.ol-zoom { margin-top: 40px; }
  
.HoverToolTip { display: table; table-layout: fixed; padding: 5px; border-radius: 5px; background: rgba(0,0,0,0.5); color: #FFF; font-size: 16px; position: absolute; bottom: 20px; right: 20px; }
.HoverToolTip > span { display: table-cell; vertical-align: middle; }
.HoverToolTip > span:last-child { padding: 2px 8px 2px 4px; }
.HoverToolTip .Img { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 5px; margin-left: 2px; background-position: center center; background-size:contain; background-repeat:no-repeat; }
.HoverToolTip .ImgTag { height: 60px; display: block; margin-right: 5px; border-radius: 4px 0px 0px 4px; }
.HoverToolTip .Date { display: block; margin-top: 4px; font-size: 70%; }
.HoverToolTip .Loc { display: block; margin-top: 4px; font-size: 70%; }
.HoverToolTip .Title > span { display: inline-block; vertical-align: middle; }


.AccountOverview { display: table; width: 100%; table-layout: fixed; border-collapse:separate; border-spacing: 20px; }
.AccountOverview > div { display: table-cell; width: 100%; border: 1px solid #CCC; border-radius: 2px; background: #FFF; }
.AccountOverview h3 { display: block; margin: 0px; font-size: 13px; padding: 5px; border-bottom: 1px solid #EEE; }

.AccountOverview .Album { display: table; table-layout: fixed; width:100%; border-collapse:collapse; vertical-align: top; margin-top: 2px; border-bottom: 1px solid #EEE; }
.AccountOverview .Album:last-child { border:none; }
.AccountOverview .Album > span { display: table-cell; width:100%; vertical-align: middle; padding: 10px; color: #000; }
.AccountOverview .Album > span:first-child { width:100px; padding-right: 5px; }
.AccountOverview .Album > span:last-child { width: 120px; }
.AccountOverview .Album .Image { display: inline-block; width:100px; height: 80px; background-size: cover; background-position: center center; border: 1px solid #EEE; border-radius: 2px; }
.AccountOverview .Album .Sub { display: block; margin-bottom: 10px; margin-top: 10px; font-size: 14px; color: #666; }
.AccountOverview .Album .Sub .Empty { font-size: 13px; font-style:italic; }

.AccountOverview .Album .Button { display: block; margin-bottom: 12px; }
.AccountOverview .Album .Button:last-child { margin-bottom:5px; }
.AccountOverview .Album .Button > span { display: inline-block; color: #333; font-size: 14px; vertical-align: middle; }
.AccountOverview .Album .Button > span:first-child { font-size: 12px; margin-right: 7px; }
.AccountOverview .Album > span:nth-child(2) .Button { margin-top: 10px; margin-bottom: 0px; }
.AccountOverview .Album > span:nth-child(2) .Button > span { font-size: 13px; color: #2a963f; }
.AccountOverview .Album > span:nth-child(2) .Button > span:first-child { font-size: 10px; margin-right: 5px;  }



.Albumsettings { position: fixed; top: 74px; bottom: 30px; left: 30px; right: 30px; padding-top:20px; }
.Albumsettings h1 { font-size:18px; margin-bottom:10px; position:absolute; top:-25px; left:5px; }
.Albumsettings .Settings { display: table; height: 100%; width: 100%; table-layout: fixed; border: 1px solid #BBB; box-shadow:1px 1px 3px rgba(0,0,0,0.1); }
.Albumsettings .Settings > span { display: table-cell; vertical-align: top; background:#FFF; position:relative; }
.Albumsettings .Settings > span:first-child { background-color: #F7F7F7; border-right: 1px solid #DDD; width:200px; }
.Albumsettings .Menu a { transition:all 200ms; display: block; padding: 15px; border-bottom: 1px solid #DDD; color:#222; font-size:15px; position:relative; }
.Albumsettings .Menu a.Selected, .Albumsettings .Menu a:hover { background:#FFF; }
.Albumsettings .Menu a.Selected:after { content:''; position:absolute; background:#FFF; top:0px; bottom:0px; right:-1px; width:2px; }
.Albumsettings .Content { position: relative; }
.Albumsettings .Content > span { display: block; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding:20px; font-size:14px;  overflow-y: auto; }
.Albumsettings .Content h2 { font-size:16px; margin-bottom:10px; padding-left:15px; margin-top:-2px; }
.Albumsettings .Content .row { display:table; width:100%; table-layout:fixed; border-bottom:1px solid #EEE; cursor:pointer; }
.Albumsettings .Content .row:first-child { border-top:1px solid #CCC; }
.Albumsettings .Content .row:last-child { border-bottom:1px solid #CCC; }
.Albumsettings .Content .row > span { display:table-cell; vertical-align:top; padding:15px; color:#888; }
.Albumsettings .Content .row > span:first-child { width:160px; font-weight:bold; font-size:13px; color:#444; }
.Albumsettings .Content .row > span:last-child { color:#28C; width:100px; text-align:right; font-size:12px; }
.Albumsettings input, .Albumsettings textarea, .Albumsettings select { width:100%; max-width: 100%; padding: 6px; border: 1px solid #EEE; border-radius: 4px; box-sizing: border-box; color: #222; }
.Albumsettings .Image { background-size:cover; background-position:center center; background-repeat:no-repeat; display: block; width: 200px; height: 200px; border: 1px solid #EEE; border-radius: 5px; }
.Albumsettings .Control > span { position: relative; display: block; }
.Albumsettings .Control .Button { margin-top: 15px; } 

.Albumsettings .MemberSearch { width: 300px; display: block; margin-top: 10px; position: relative; }
.Albumsettings .MemberSearch .Input { display: table; table-layout: fixed; width: 300px; box-sizing: border-box; }
.Albumsettings .MemberSearch .Input > span { display: table-cell; box-sizing: border-box; vertical-align: top; }
.Albumsettings .MemberSearch .Input > span:last-child { padding-left: 10px; width: 80px; }
.Albumsettings .MemberSearch .Input .Button { margin: 0px; width: 100%; }
.Albumsettings .MemberSearch .Panel { position: absolute; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); bottom: 0px; left: 0px; right: 80px; transform: translate(0, 100%); background: #FFF; z-index: 100; }
.Albumsettings .MemberSearch .SearchIcon { display: none; position: absolute; left: 4px; top: 4px; bottom:4px; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); width: 20px; box-sizing: border-box; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; }
.Albumsettings .MemberSearch.WithID input { text-indent:26px; }
.Albumsettings .MemberSearch.WithID .SearchIcon { display: block; }

.Albumsettings .Account { display: table; table-layout: fixed; width: 300px; max-width: 100%; box-sizing: border-box; padding: 8px; font-size: 90%; border-bottom: 1px solid #EEE; } 
.Albumsettings .Account > * { display: table-cell; box-sizing: border-box; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }
.Albumsettings .Account > *:first-child { width: 40px; } 
.Albumsettings .Account > *:nth-child(3) { width: 20px; text-align: right; padding-right: 12px; color: #AAA; } 
.Albumsettings .Account > *:nth-child(3) > a { display: inline-block; vertical-align: middle; cursor: pointer; }
.Albumsettings .Account .Icon { display: block; width: 28px; height: 28px; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); border-radius: 50%; margin-right: 5px; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.Albumsettings .Account .Name { padding-top: 1px; font-size: 90%; color: #222; font-weight: bold; }
.Albumsettings .Account .Date { margin-top: 3px; font-size: 80%; color: #888; display: block; }
.Albumsettings .Account .Delete { color: #A00; font-size: 20px; cursor: pointer; opacity: 0.5; }


.Albumsettings .Notes { display: block; padding:15px; }
.Albumsettings .Note { display: block; border-bottom: 1px solid #EEE; padding-top: 20px; padding-bottom: 20px; }
.Albumsettings .Note:nth-child(3) { border-top:1px solid #CCC; }
.Albumsettings .Note:last-child { border-bottom:1px solid #CCC; }
.Albumsettings .Note [data-edit="1"] { display: none; }
.Albumsettings .Note .Head { display: table; width:100%; table-layout:fixed; cursor: pointer; }
.Albumsettings .Note .Head > span { display: table-cell; vertical-align:middle; }
.Albumsettings .Note .Head > span:last-child { transition: all 200ms; width:20px; padding-right: 10px; text-align: right; font-size: 24px; transform:none; }
.Albumsettings .Notes .Title { font-weight: bold; display: block; color: #0063ba; width: 70%; padding-left: 10px; padding-right: 30px; }
.Albumsettings .Notes .Creator, .Albumsettings .Notes .Date { display: block; font-size: 90%; color: #666; }
.Albumsettings .Notes .Desc { display: none; padding: 10px 10px 0px 10px; }
.Albumsettings .Notes .Buttons { display: block; margin-top: 15px; font-size: 90%; }
.Albumsettings .Notes .Button { display:none; padding: 5px; margin-right: 10px; border: 1px solid #DDD; border-radius: 2px; background: #FFF; cursor: pointer; }
.Albumsettings .Notes .Button > span:first-child { display: inline-block; font-size:10px; margin-right: 8px; } 
.Albumsettings .Notes .Button.Add { display:block; margin-top: 20px; margin-bottom: 20px; width:100px; }
.Albumsettings .Notes .Button:hover { background: #45a8ff; color: #FFF; }

.Albumsettings .Note.Edit { background: aliceblue; }
.Albumsettings .Note.Open .Head > span:last-child { transform: rotateZ(-90deg) translate(4px, -2px); }
.Albumsettings .Note.Open .Desc { display: block; }
.Albumsettings .Note.Open.Edit [data-edit="1"] { display: block; }
.Albumsettings .Note.Open.Edit [data-edit="0"] { display: none; }
.Albumsettings .Note .Buttons [data-action="edit"] { display: inline-block; }
.Albumsettings .Note.Edit .Buttons [data-action="edit"] { display: none; }
.Albumsettings .Note.Edit .Buttons [data-action="save"] { display: inline-block; }
.Albumsettings .Note.Edit .Buttons [data-action="delete"] { display: inline-block; float: right; margin-right: 0px; }
.Albumsettings .Note.Edit .Buttons [data-action="cancel"] { display: inline-block; }

.Gallery { display: block; width: 100%; }
.Gallery .row { display: table; width: 100%; table-layout: fixed; }
.Gallery .DisplayImage { position:relative; text-align: center; display:table-cell; box-shadow: inset 0px 0px 3px rgba(0,0,0,0.4); vertical-align:top; box-sizing:border-box; background: #666; border:1px solid #FFF; backface-visibility: hidden; perspective: 1000; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.Gallery .DisplayImage[data-private="1"]:after { content: '\e90c'; font-family: 'icomoon'; top: 15px; right: 10px; font-size: 14px; z-index: 100; position: absolute; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); color: #FFF; }
.Gallery .DisplayImage.Loaded {  animation:50ms ease-out 0s 1 PhotoLoaded; }
.Gallery .DisplayImage .Percentage { position:absolute; top:50%; left:50%; padding:20px; text-align:center; font-size:16px; font-weight:bold; font-family:serif; background:rgba(255,255,255,0.7); border:2px solid #EEE; border-radius:40px; transform:translate(-50%,-50%); }
.Gallery .DisplayImage img { max-height: 600px; vertical-align: top; width: 100%; }
.Gallery .DisplayImage .Icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 101; width:35%; max-width: 100px; }
.Gallery .DisplayImage .overlay { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; font-size:3vw; color: #FFF; background: rgba(0,0,0,0.4); }
.Gallery .DisplayImage .overlay > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-shadow:2px 2px 4px rgba(0,0,0,0.8); }
.Gallery .Worldmap { position: relative; display: table-cell; padding-bottom: 25%; border: 2px solid #FFF; overflow: hidden; box-sizing: border-box; }
.Gallery .Upload { padding-bottom: 20%; text-align: center; cursor: pointer; font-size: 16px; position: relative; background: url('/images/photography.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; }
.Gallery .Upload > span { position: absolute; top: 50%; left: 0px; right: 0px; transform: translate(0, -50%); padding: 5px; background:rgba(255,255,255,0.8); border-radius: 5px; }
.Gallery .Upload > span > span { display: inline-block; vertical-align: middle; }
.Gallery .Upload .icon-add_a_photo { margin-right: 5px; font-size: 34px; padding-bottom: 5px; }  
   
.FeedOverview { padding:0px 20px; font-size: 15px; }
.FeedOverview .FeedAnchor { height: 100px; }
.FeedOverview .FeedAnchor .lazyloading {
    position: relative;
    height: 100px;
    display: block;
}

.FeedUpdate { display: block; }
.FeedUpdate .Head { padding: 15px; border-bottom: 1px solid #EEE; display: table; table-layout: fixed; width: 100%; box-sizing: border-box; }
.FeedUpdate .Head > * { display: table-cell; vertical-align: middle; }
.FeedUpdate .Head > span:nth-child(2){ padding-left: 15px; }
.FeedUpdate .Head .Icon { width: 50px; text-align: left; }
.FeedUpdate .Head .Icon > span { border: 1px solid #EEE; border-radius: 4px; position:relative; width:100%; padding-bottom: 66%; display:inline-block; vertical-align:top; box-sizing:border-box;background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.FeedUpdate .Title { display: block; font-weight: bold; }
.FeedUpdate .Date { display: block; margin-top: 6px; font-size: 80%; color: #888; }
.FeedUpdate .Timeline { padding: 80px 30px !important; }
.FeedUpdate .Timeline > div { position: relative; }
.FeedUpdate .Timeline .Events { display: block; position: relative; margin: auto; width: 100%; }  
.FeedUpdate .Timeline.Underline { border-bottom: 1px solid #EEE; }
.FeedUpdate .FeedAnchor .Head { border-bottom: none; }
.FeedUpdate .FeedAnchor .Title { background: #EEE;  }
.FeedUpdate .FeedAnchor .Date { background: #EEE; width: 200px;  }
.FeedUpdate .Comments { display: block; padding: 5px; border-top: 1px solid #EEE; }
.FeedUpdate .Comment { display: table; table-layout: fixed; width: 100%; box-sizing: border-box; padding: 15px; font-size: 90%; }
.FeedUpdate .Comment:last-child { border: none; }
.FeedUpdate .Comment > * { display: table-cell; vertical-align: top; }
.FeedUpdate .Comment > *:first-child { width: 45px; }
.FeedUpdate .Comment .Icon { margin-top: 0px; display: block; width: 34px; height: 34px; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); border-radius: 50%; margin-right: 5px; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:pointer; position:relative; }
.FeedUpdate .Comment .Message { display: block; width: 100%; color: #444; background: #FAFAFA; padding: 8px; border-radius: 5px; line-height: 18px; border: 1px solid #F7F7F7; box-sizing: border-box; }
.FeedUpdate .Comment .Date { padding-left: 5px; }
.FeedUpdate .Comments .LoadMore { display: inline-block; margin:10px 15px 5px 15px; color: #174776; font-size: 90%; cursor: pointer; }
.FeedUpdate .Write textarea { padding: 8px; border-radius: 5px; line-height: 18px; border: 1px solid #CCC; background: #FAFAFA; width: 100%; min-height: 2em; box-sizing: border-box; resize: none; }

.AlbumHeader { border: none !important; background:none !important; width:100%; column-count: 3; column-gap: 20px; }
.AlbumHeader > a { display: block; text-align: center; padding:6px; background: #FFF; border: 1px solid #CCC; border-radius: 5px; cursor: pointer; }
.AlbumHeader > a.Selected { background: #E5FFE5; border-color: #48cf2c; color: #060; }

.Album .BigWorldmap { position: relative; height: 600px; overflow: hidden; }
.Album .Timeline { padding: 10px 50px !important; }
.Album .Timeline .AlbumData { position: relative; padding-top: 200px; padding-bottom:200px; }
.Album .Timeline .markerlabel > span { font-size: 11px !important; background: rgba(255,255,255,0.9); }
.Album .Timeline .Title { font-size: 40px !important; color: #CCC; text-align: center; padding: 10px; width:100%; }
.Album .Timeline > span { display: inline-block;  width: 50px; margin: 0px 5px 5px 5px; text-align: center; vertical-align: bottom; }
.Album .Timeline a { text-decoration: none; color: #AAA; display: inline-block; vertical-align: bottom; margin-bottom: 4px; }
 
.AddAlbumCollection { padding:40px 20px 20px 20px; box-sizing: border-box; position: relative; overflow: hidden; }
.AddAlbumCollection .LoginButton { max-width: 200px; margin-top: 20px; padding: 8px 10px; }
.AddAlbumCollection input, .AddAlbumCollection select { border-color: #AAA; font-size: 15px; }
.AddAlbumCollection textarea { min-height: 50px; border-color: #AAA; }
.AlbumNoAccess { display: block; padding: 20px; border: 1px solid #CCC; border-radius: 5px; background: #FFF; }

.EmptyAlbum { display: flex !important;align-items: center; }
.EmptyAlbum > *:first-child { width:200px; text-align: center; }
.EmptyAlbum img, .EmptyAlbum svg { width: 90%; }
.EmptyAlbum b { display: block; margin-bottom: 20px; }
.EmptyAlbum .Button { margin-top: 20px; }

.CMSContent { padding:70px 20px 20px 20px; margin: auto; max-width: 1024px; }

     
.addexperience { display:table; table-layout: fixed; width: 100%; }
.addexperience > span { display: table-cell; vertical-align: middle; } 
.addexperience > span:first-child { width:50px; }  
.addexperience .row { display:table; table-layout: fixed; width: 100%; border: 1px solid #CFCFCF; border-radius: 20px; background: #FFF; }
.addexperience .row > span { display: table-cell; vertical-align: middle; position: relative; } 
.addexperience .row > span:nth-last-child(2) { width:150px; padding-right:10px; }  
.addexperience .row > span:last-child { width:120px; border-left:1px solid #CFCFCF; background:#dfefd2; border-radius: 0px 20px 20px 0px; }
.addexperience .mmlprofile { width:40px; height:40px; }
.addexperience .row .mmlbutton { width: 100%; border:none; background:none; cursor: pointer; padding: 10px; }
.addexperience .row input, .addexperience .row select { border: none; outline: none; }
.addexperience select + label, .addexperience input:focus + label, .addexperience input.Filled + label, .addexperience textarea:focus + label, .addexperience textarea.Filled + label, .addexperience input[type="date"] + label{
    left: 0px;
top: -19px;
color:#222;padding: 4px 10px;
background: rgba(255,255,255,0.8);
border-radius: 20px;
}

@media only screen and (max-width: 1000px) {
    .MainPanel .TableLayout { padding:10px 10px; }
    .MainPanel .TableLayout > *:first-child { display:none;  }
    .MainPanel .TableLayout > *:last-child { padding: 0px; }
    .MainBar .Search { width:auto; }
    .MainBar .tbl > *:last-child { width:150px; }
    .MainBar .Settings:not(.Account) { display: none; }
    .Gallery .DisplayImage .overlay { font-size:5vw; }
}

@media only screen and (max-width: 500px) {       
    .MainPanel .TableLayout { padding:10px 0px; }
    .MainPanel .TableLayout .Content > div, .FeedUpdate { border-radius: 0px; border-left: none; border-right: none; }
    
    .FeedUpdate .Timeline, .MainPanel .TableLayout .Timeline { display: none !important; }
    .Worldmap .Locations, .Worldmap .Button { display: none; }
    
    .MainBar .Search { display: none; }
    .MainBar .tbl > *:last-child { width:auto; }
    
    .MainPanel .TableLayout .CollectionHead .NavButton { width: 50%; }
    .MainPanel .TableLayout .CollectionHead .NavButton .Icon { display: none; }
    .MainPanel .TableLayout .CollectionHead .NavButton .Name, .MainPanel .TableLayout .CollectionHead .NavButton .txt { display:none; }
    .MainPanel .TableLayout .CollectionHead .NavButton .icon { padding: 10px; }
    
    .MainPanel .TableLayout .Content > div { margin-bottom: 10px; }
    
}   

.emptyfeed { padding: 30px; text-align: center; position: relative; }
.emptyfeed h2 { position: absolute; top:14%; left:35%; }  
.emptyfeed img { width: 90%; max-width: 500px; }
.emptyfeed .message { display: block; margin-top:25px; font-size: 17px; line-height: 25px; }


.AlbumHead { border-radius:5px;
padding: 0px 0px 10px 0px;
background: #FFF; }
.AlbumHead .Avatar { margin-bottom: 5px; }
.AlbumHead .Avatar:first-child { border-radius:5px 5px 0px 0px; }
.AlbumHead .Header { display: block; font-size: 90%; padding:8px 12px; overflow: hidden; }
.AlbumHead .Header .Right { float: right; }