.mvsExplorer { 
    display: table; border-collapse: collapse; table-layout: fixed; position: relative; 
    width: 90%; max-width: 900px; margin: 20px auto;
    border: solid 1px #888; background-color: #FFF; 
    -webkit-box-shadow: 0px 0px 10px 2px #444; -moz-box-shadow: 0px 0px 10px 2px #444;    
    -ms-box-shadow: 0px 0px 10px 2px #444; box-shadow: 0px 0px 10px 2px #444;    
}
.mvsExplorer > div { display: table-row; }
.mvsExplorer > div > div { display: table-cell; width: 100%; position: relative; margin: 0; padding: 0; vertical-align: top; }

/********** Titlebar **********/
.mvsExplorer .mvsExplorerTitlebar {
    height: 30px; border-bottom: solid 2px #888; background-color: steelblue; padding-left: 35px; 
}
.mvsExplorer .mvsExplorerTitlebar:before { 
    font-family: 'FontAwesome'; content: '\f07c'; position: absolute; left: 8px; 
    font-size: 1.2rem; color: #FFF; top: 50%; transform: translateY(-50%);
}
.mvsExplorer .mvsExplorerTitlebar span {
    color: #FFF; font-size: 1.1rem; line-height: 30px; vertical-align: middle;
}
.mvsExplorer .mvsExplorerTitlebar div { 
    position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #FFF; border: solid 1px rgba(0,0,0,0); 
}
.mvsExplorer .mvsExplorerTitlebar div:before { 
    font-family: 'FontAwesome'; position: absolute;
    top: 50%; left: 50%; font-size: 1.2rem; transform: translate(-50%,-50%);
}
.mvsExplorer .mvsExplorerTitlebar div:hover { 
    background-color: #FFF; color: steelblue; border-color: #c1c1c1;
}
.mvsExplorer .mvsExplorerTitlebar div.fullscreen:before { content: '\f2d0'; }
.mvsExplorer.fullscreen .mvsExplorerTitlebar div.fullscreen:before { content: '\f2d2'; }


/********** Toolbar **********/
.mvsExplorer .mvsExplorerToolbar {
    -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; 
    -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.mvsExplorer .mvsExplorerToolbar:after { content: ""; display: block; height: 0; overflow: hidden; }
.mvsExplorer .mvsExplorerToolbar:after { clear: both; }
.mvsExplorer .mvsExplorerToolbar { zoom: 1; }

.mvsExplorer .mvsExplorerToolbar > div { 
    float: left; height: 30px; margin: 2px 0px 2px 2px;
    padding-left: 30px; padding-right: 10px; position: relative; cursor: pointer;
    border: solid 1px #FFF; color: #444; vertical-align: middle;
}
.mvsExplorer .mvsExplorerToolbar > div.disabled { color: #888; }
.mvsExplorer .mvsExplorerToolbar > div:before { 
    content:''; font-family: 'FontAwesome'; position: absolute; left: 2px; top: 4px; font-size: 1.2rem; 
    width: 20px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center;
}
.mvsExplorer .mvsExplorerToolbar > div > span { font-size: 0.9rem; line-height: 29px; vertical-align: middle; }
.mvsExplorer .mvsExplorerToolbar > div:not(.disabled):hover { 
    background-color: #c7e6ff; border: solid 1px #4a93d0; color: #000;
 }
.mvsExplorer .mvsExplorerToolbar > div.new-folder:before { content: '\f07b'; }
.mvsExplorer .mvsExplorerToolbar > div.new-file:before { content: '\f15b'; }
.mvsExplorer .mvsExplorerToolbar > div.delete-item:before { content: '\f1f8'; font-weight: bold; }
.mvsExplorer .mvsExplorerToolbar > div.rename-item:before { content: '\f303'; font-weight: bold; }
.mvsExplorer .mvsExplorerToolbar > div.edit-item:before { content: '\f044'; }
.mvsExplorer .mvsExplorerToolbar > div.permissions-item:before { content: '\f023'; font-weight: bold; }
.mvsExplorer .mvsExplorerToolbar > div.save-edit:before { content: '\f0c7'; }
.mvsExplorer .mvsExplorerToolbar > div.cancel-edit:before { content: '\f00d'; font-weight: bold; }
.mvsExplorer .mvsExplorerToolbar > div.upload:before { content: '\f093'; font-weight: bold;  }
.mvsExplorer .mvsExplorerToolbar > div.upload input[type=file],
.mvsExplorer .mvsExplorerToolbar > div.upload input[type=file] { 
    visibility: hidden; position: absolute; top: 0px; left: 0px; 
}
.mvsExplorer .mvsExplorerToolbar > div.reload:before { content: '\f2f1'; font-weight: bold;  }


/********** Browser **********/
.mvsExplorer .mvsExplorerBrowser { height: 300px; }
.mvsExplorer .mvsExplorerBrowser:after {  
    content: ''; position: relative; width: 1px; height:100%; display: block;
}

.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper {  
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; padding: 5px; overflow: auto; 
    -webkit-box-shadow: inset 0px 0px 10px 2px #444; -moz-box-shadow: inset 0px 0px 10px 2px #444;
    -ms-box-shadow: inset 0px 0px 10px 2px #444; box-shadow: inset 0px 0px 10px 2px #444;
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper.is-dragover { background-color: #fafad2; }
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable { 
    position: relative; display: table; border-collapse: collapse; width: 100%;
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div { display: table-row; }
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div > div { 
    display: table-cell; color: #444; border-bottom: solid 1px #ccc; font-size: 0.9rem;
    padding: 3px 5px 3px 5px; cursor: default; position: relative; white-space: nowrap; text-align: left;
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div > div.columnCenter { text-align: center; }
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div > div.columnRight { text-align: right; }
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div:not(:nth-child(1)) > div:nth-child(1) { padding-left: 30px; }
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div:not(:nth-child(1)) > div:nth-child(1):before { 
    content: '\f15b'; font-family: 'FontAwesome'; position: absolute; left: 5px; 
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div:not(:nth-child(1)).directory > div:nth-child(1):before  {
    content: '\f07c'
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div:nth-child(1) > div { 
    font-weight: bold; color: #222; font-size: 1rem; 
    -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
	-moz-user-select: none; -ms-user-select: none; user-select: none;
}
.mvsExplorer .mvsExplorerBrowser .filesBrowserTableWrapper .filesTable > div.selected > div { background-color: #fff18d; }


.mvsExplorer .mvsExplorerBrowser .editorBrowserWrapper {  
    position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; padding: 5px; overflow: hidden; display: none;
    -webkit-box-shadow: inset 0px 0px 10px 2px #444; -moz-box-shadow: inset 0px 0px 10px 2px #444;
    -ms-box-shadow: inset 0px 0px 10px 2px #444; box-shadow: inset 0px 0px 10px 2px #444;
}
.mvsExplorer .mvsExplorerBrowser .editorBrowserWrapper textarea {
    display: block; width: 100%; height: 100%;
}



.mvsExplorer .mvsExplorerMessageBox {
    position: absolute; width: 90%; max-width: 350px; min-height: 100px;
    border: solid 1px #888; background-color: #FFF; z-index: 1000;
    top: 50%; left: 50%; display: blcok;
    -webkit-box-shadow: 0px 0px 10px 2px #888; -moz-box-shadow: 0px 0px 10px 2px #888;
    -ms-box-shadow: 0px 0px 10px 2px #888; box-shadow: 0px 0px 10px 2px #888;
    -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.mvsExplorer .mvsExplorerMessageBox > div { 
    display: table; width: 100%; height: 100%; margin: 0px; padding: 0px;
}
.mvsExplorer .mvsExplorerMessageBox > div > div { display: table-row; }
.mvsExplorer .mvsExplorerMessageBox > div > div > div { display: table-cell; }

.mvsExplorer .mvsExplorerMessageBox .messagebar {
    padding: 20px 10px 0px; font-size: 1.1rem;
}

.mvsExplorer .mvsExplorerMessageBox .inputbar {
    height: 40px; padding: 20px 10px;
}
.mvsExplorer .mvsExplorerMessageBox .inputbar input {
    width: 100%; border: 0; border-bottom: solid 1px #888; color: #444;
}
.mvsExplorer .mvsExplorerMessageBox .inputbar input:focus {
    border-color: #2fa8d6;
}

.mvsExplorer .mvsExplorerMessageBox .permissionsbar { padding: 10px; }
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset {
    border: solid 1px #444; min-height: 70px; margin-top: 0px; margin-bottom: 5px;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset legend {
    font-weight: bold; background-color: white; margin-left: 10px; padding-left: 5px; padding-right: 5px;
}

.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div {
    width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap;
}

.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox > label { text-align: center; display: block; padding-bottom: 5px; }
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"] { display: none !important; visibility: hidden; width: 1px; height: 1px; border: none; background-color: transparent; }
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:disabled + .switcher { opacity: 0.6; cursor: not-allowed; }
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:checked + .switcher {
	-moz-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
	-o-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
	-webkit-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
	-webkit-transition-delay: 0s, 0.02s; transition-delay: 0s, 0.02s;
	transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out 0.02s;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox .switcher {
	background-color: #ffffff; border: 2px solid #e6e6e6; padding: 0; display: block;
	cursor: pointer; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;
	-moz-transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
	-o-transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
	-webkit-transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
	-webkit-transition-delay: 0.02s, 0s;
	transition-delay: 0.02s, 0s;
	transition: box-shadow 0.2s ease-out 0.02s, border-color 0.2s ease-out;
	width: 43px; height: 25px;

	-moz-box-shadow: 0px 0px 15px 10px #e04545 inset;
	-webkit-box-shadow: 0px 0px 15px 10px #e04545 inset; 
	box-shadow: 0px 0px 15px 10px #e04545 inset;
	border-color: #e22020;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox .switcher:after {
	background: #ffffff; position: absolute; top: 0; left: 0; content: "";
	-moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
	-moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;
	height: 21px; width: 21px; background-color: #f5f5f5;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox .switcher:hover:active:after {
	width: 28.35px !important;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:disabled + .switcher:after {
	height: 21px !important; width: 21px !important;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:disabled:checked + .switcher:after {
	-moz-transform: translateX(18px) !important; -ms-transform: translateX(18px) !important;
	-webkit-transform: translateX(18px) !important; transform: translateX(18px) !important;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:checked + .switcher {
	border-color: #4eb12c; 
	-moz-box-shadow: 0px 0px 15px 10px #62b446 inset;
	-webkit-box-shadow: 0px 0px 15px 10px #62b446 inset; 
	box-shadow: 0px 0px 15px 10px #62b446 inset;
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:checked + .switcher:after {
	-moz-transform: translateX(18px); -ms-transform: translateX(18px);
	-webkit-transform: translateX(18px); transform: translateX(18px);
}
.mvsExplorer .mvsExplorerMessageBox .permissionsbar fieldset > div .switcherBox input[type="checkbox"]:checked + .switcher:hover:active:after {
	-moz-transform: translateX(10.65px); -ms-transform: translateX(10.65px);
	-webkit-transform: translateX(10.65px); transform: translateX(10.65px);
}


.mvsExplorer .mvsExplorerMessageBox .messageButtonsbar {
    padding: 20px 0px 10px; display: flex; justify-content: space-around; flex-wrap: wrap;
}

.mvsExplorer .mvsExplorerMessageBox .messageButtonsbar input {
    padding: 5px 20px; border: solid 1px #048cbf; cursor: pointer; background-color: #2fa8d6; color: #fff; font-size: 1rem;
}
.mvsExplorer .mvsExplorerMessageBox .messageButtonsbar input:hover,
.mvsExplorer .mvsExplorerMessageBox .messageButtonsbar input:focus { background-color: #53c8f5; }
.mvsExplorer .mvsExplorerMessageBox .messageButtonsbar input:active { background-color: #0c7ca7; }



.mvsExplorer .mvsExplorerStatusbar {
    height: 20px; border-top: solid 1px #888; background-color: #222;
}
.mvsExplorer .mvsExplorerStatusbar .mvsExplorerUploadProgressbar { 
    width:100%; height: 1px; position: absolute; bottom: 3px; left: 0px; 
}
.mvsExplorer .mvsExplorerStatusbar .mvsExplorerUploadProgressbar,
.mvsExplorer .mvsExplorerStatusbar .mvsExplorerUploadProgressbar * { 
    -webkit-transition: width 0.2s 0s ease-in;  -moz-transition: width 0.2s 0s ease-in; 
    -ms-transition: width 0.2s 0s ease-in; transition: width 0.2s 0s ease-in; 
}	
.mvsExplorer .mvsExplorerStatusbar .mvsExplorerUploadProgressbar span { 
    width:0%; height:2px; margin:2px 0; background:#0fb123; position:absolute; 
    -webkit-box-shadow:0px 0px 10px 1px rgba(0,255,31,0.7); -moz-box-shadow:0px 0px 10px 1px rgba(0,255,31,0.7);
    -ms-box-shadow:0px 0px 10px 1px rgba(0,255,31,0.7); box-shadow:0px 0px 10px 1px rgba(0,255,31,0.7);
}


.mvsExplorer.fullscreen {
    position: fixed; top: 0px; left: 0px; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; z-index: 999;
}

.mvsExplorer .locked:before { 
    position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(255,255,255,.7) !important; z-index: 999; content: '';
}
.mvsExplorer.fullscreen .mvsExplorerBrowser { height: 100%; }