@font-face {
    font-family: 'icomoon';
    src:    url('../images/icons/icomoon.eot?i9rm8t');
    src:    url('../images/icons/icomoon.eot?i9rm8t#iefix') format('embedded-opentype'),
        url('../images/icons/icomoon.ttf?i9rm8t') format('truetype'),
        url('../images/icons/icomoon.woff?i9rm8t') format('woff'),
        url('../images/icons/icomoon.svg?i9rm8t#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="app-icon"], [class*=" app-icon"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


* { box-sizing: border-box; -moz-box-sizing: border-box;}
body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 13px;}

button, input, textarea {font-family: 'Open Sans', sans-serif; }

a, button {transition: all .2s ease-in;  -moz-transition: all .2s ease-in; /* Firefox 4 */  -webkit-transition: all .2s ease-in; /* Safari and Chrome */ -o-transition: all .2s ease-in; /* Opera */}

h2 {font-size: 1.5em; font-weight: 400;}

.button {  background-color:#3bbde3; background-repeat: no-repeat; background-position: 8px 50%; color:#fff; margin-right: .5em; text-decoration:none; font-weight: bold; text-transform: none; padding: .5em 1em .5em 1em; border-radius: 4px; -moz-border-radius: 4px; display: inline-block;}
.button:hover {color:#fff; background-color:#1093b9;}         

.inactiveLink {
   pointer-events: none;
   cursor: default;
   background-color:grey;
}
.window-footer{
        position: absolute;
        bottom: 0;
        display: block; 
        width: 98%;
        margin-top: 150px;
        padding: 19px 0 20px;
        text-align: right;
        border-top: 1px solid #e5e5e5;
      }

span.icon { padding-left: 20px; background-repeat:no-repeat;}
span.icon-folder { background-image: url(../images/icons/folder.png); }
span.icon-word { background-image: url(../images/icons/fileWord.png); }
span.icon-docx { background-image: url(../images/icons/fileWord.png); }
span.icon-doc { background-image: url(../images/icons/fileWord.png); }
span.icon-excel { background-image: url(../images/icons/fileExcel.png); }
span.icon-exe { background-image: url(../images/icons/fileExe.png); }
span.icon-music { background-image: url(../images/icons/fileMusic.png); }
span.icon-other { background-image: url(../images/icons/fileOther.png); }
span.icon-pdf { background-image: url(../images/icons/filePDF.png); }
span.icon-ppt { background-image: url(../images/icons/filePPT.png); }
span.icon-rtf { background-image: url(../images/icons/fileRTF.png); }
span.icon-txt { background-image: url(../images/icons/fileRTF.png); }
span.icon-png { background-image: url(../images/icons/Icon-Image.png); }
span.icon-jpg { background-image: url(../images/icons/Icon-Image.png); }
span.icon-video { background-image: url(../images/icons/fileVideo.png); }
span.icon-zip { background-image: url(../images/icons/fileZip.png); }
.headerContainer { width: 100%; height: 50px; background:#fff; z-index: 1; border-bottom: 1px solid #ccc; position: fixed; top:0; -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.3); box-shadow: 0 0 30px 0 rgba(0,0,0,.3);}
    .headerContainer:after { content: ""; clear: both; display: block; }

.mainNavContainer {  float:right;}
    .mainNavContainer ul { margin: 0; padding: 0; list-style:none;}
        .mainNavContainer ul li { float:left;}
            .mainNavContainer ul li a { margin: 1.1em 1em 0 0; color:#415358; display:block; padding: .3em 1em; text-decoration:none; font-weight: 700; text-transform:uppercase; font-size:.85em;}
                .mainNavContainer ul li a:hover { color: #3bbde3; }

            .app-icon-user:before { content: "\e904";  margin-right: .75em;}
            .app-icon-sync:before {content: "\e905";  margin-right: .75em;}
            .app-icon-signout:before {content: "\e902";  margin-right: .75em;}

#realFileContainer { width: 100%; top: 50px; bottom: 0; background:#000; position: absolute;}
    #vertical {height: 100%; margin: 0 auto; position: relative;}

    #top-pane {}
    div#vertical.k-widget { border: 0 !important;}

    #left-pane {background-color: rgba(233,237,240,.5); }
    #center-pane  {  background-color: rgba(255,255,255,1);}
    #right-pane {background-color: rgba(233,237,240,.5);}

    .pane-content {padding: 1em;}

    
    /****** Tree Styles ******/
    
    #treeview { overflow: hidden;}
    #treeview ul { }
    #treeview .k-treeview .k-in { padding: 0; margin: 0;}
    /*#treeview .k-plus { background: url(../images/icons/arrow-right.png);}
    #treeview .k-minus { background: url(../images/icons/arrow-down.png);}*/
    #treeview .k-state-selected, #treeview .k-state-focused { background-color:transparent; color:#000; border: 0; font-weight: 700; box-shadow: none;}
    #treeview .k-state-hover { background-color: rgba(0, 0, 0, 0.05);}
    

    #treeview .icon {display: block; padding: 5px 20px 5px 30px; background-position: 5px 50%; background-repeat: no-repeat;}
    #treeview .folder { background-image: url(../images/icons/folder.png); }
    #treeview .shortcut { background-image: url(../images/icons/shortcut-Folder.png); }

    /****** GridStyles ******/
    .center-title-container { background: rgba(233,237,240,.5); }
        .folderTitle { font-size: 1.5em; padding-top: .4em;}
        .breadcrumbs { padding: .75em 0; color:#7c868d; font-size: .95em; }
            .breadcrumbs a { color:#7c868d; text-decoration: none; }

        .actionMenu { border-top: 1px solid #e1e5e8; padding: 1em; background: rgb(233, 237, 240);}
            .actionMenu::after { content: ""; clear: both; display: block;}
            .actionMenu ul {padding: 0; margin: 0; list-style: none; float:left;}
            .actionMenu ul li {display:inline-block}        
            .actionMenu ul li a {  background-color:#3bbde3; color:#fff; margin-right: .5em; text-decoration:none; text-transform:uppercase; font-weight: bold; padding: .75em 1.25em; border-radius: 4px; -moz-border-radius: 4px; display: block;}
                .actionMenu ul li a:hover {color:#fff; background-color:#1093b9;}


                .app-icon-add-file:before { content: "\e900";  margin-right: .5em;}
                .app-icon-add-folder:before {content: "\e901";  margin-right: .5em;}
                
        .searchContainer {float:right;}
        .searchContainer input {width: 350px; border: 1px solid #e1e5e8; padding: .6em 80px .6em .5em; box-sizing: border-box; -moz-box-sizing: border-box;border-radius: 4px; -moz-border-radius: 4px;}
        .searchContainer button { position:absolute; top: 0; right:0; bottom: 0; padding: 0 1em;  background: #3bbde3; border: 0; text-transform:uppercase; font-weight: bold; color:#fff; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px;}
            .searchContainer button:hover { background: #1093b9;}

        .relative { position:relative;}       


    .k-grid { border: 0;}
    .k-grid table .k-header { background:#415358; border-right: 1px solid #415358; border-color:#35464A; font-weight: bold;    color: #fff !important;    padding: 1.25em 1em !important;    text-transform: uppercase;}
    .k-grid table {   table-layout: fixed;}
    .k-grid-header-wrap {background:#415358; }
    .k-grid table .k-header a.k-link { font-weight: bold; color:#fff !important; padding: 0 !important; text-transform: uppercase;}

    .k-grid table tbody tr.k-alt { background:#f8fafb;}
        .k-grid table tbody tr:hover { background: rgba(59,189,227,.1);}
        .k-grid table tbody tr.k-state-selected, .k-grid table tbody tr.k-state-selected:hover { background: rgba(59,189,227,.3); color:#000;}

    .k-grid table tbody td { padding: .5em 1em !important; border-bottom: 1px solid #eef2f5; border: 0 !important; white-space: nowrap; text-overflow: ellipsis;}        

    
    .k-grid table span.icon-foldershortcut { background-image: url(../images/icons/shortcut-Folder.png); }
    .k-grid table span.icon-fileshortcut { background-image: url(../images/icons/shortcut-File.png); }


.paddingH1em { padding: 1em;}

/* allow menu to break out of treeview container */
div.k-treeview {
    overflow: visible;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.syncClientModal { position:fixed; right: 0; top: 49px; z-index: 1; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.3); box-shadow: 0 0 100px 0 rgba(0,0,0,.3); display:none;}

.app-icon-close:before {content: "\e902"; cursor:pointer; position:absolute; font-size: .75em; padding: 1em; display:inline-block; top: 1em; right:1em; }
.app-icon-close:hover:before { background: red; color:#fff;}

.vertCenter001 {display: table; height: 100%;  width: 100%;}
.vertCenter002 {display: table-cell;  vertical-align: middle;}


/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 0 auto; /* 15% from the top and centered */
    padding: 2em;
    border: 1px solid #888;
    position: relative;
    width: 80%;
    max-width: 1200px;
    min-width: 900px; /* Could be more or less, depending on screen size */
}

.modal-content-sync { 
    background-color: #fefefe;
    margin: 0 auto; /* 15% from the top and centered */   
    border: 1px solid #e1e5e8;
    position: relative;
    width: 600px;        
}

.syncPadding { padding: 2em;}
.syncBtnContainer {border-top: 1px solid #e1e5e8; padding: 1.5em 2em; background: rgb(233, 237, 240); }

.modalBtn {transition: all 0.2s; background: #3bbde3; cursor:pointer;   color: #fff;    text-transform: uppercase;    text-decoration: none;    display: inline-block;    padding: .75em 1.25em;    border-radius: 3px;    -moz-border-radius: 3px;    border:0;    font-weight: 700;}
.modalBtn:hover {color:#fff; background-color:#1093b9;}

#divModalFilename h2, .modalTitle h2 {margin: 0 0 1em 0; font-size: 1.5em; font-weight: 400;}

.gridHeaderRemoveScrollbar {
    padding: 0 !important;
}

.gridContentRemoveScrollbar {
    overflow-y: visible;
}

/* Tabs */
.tabLnkContainer3, .rightTabLnkContainer3 { margin: 0; border-bottom: 1px solid #e5e5e5; }
    .tabLnk, .rightTabLnk, .rightTabLnk:hover, .tabLnk:hover { display: inline-block; padding: .75em 1.75em; color: #415358; text-decoration:none; font-size: 1em; font-weight: 700; -webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0; background: rgba(65, 83, 88, 0.12);}
        .tabLnkActive, .rightTabLnkActive, .rightTabLnkActive:hover, .tabLnkActive:hover { background: #415358; color: #fff; }

.tabContent { padding: 1em 0 6em 0; position:relative;}

.tabBtns { border-top: 1px solid #e1e5e8; background: rgb(233, 237, 240);    position: absolute;    left: -2em;    bottom: -2em;    right: -2em;    padding: 1.75em 2em;}

.clearAfter:after { content:""; clear:both; display:block;}
.width65 {width: 65%; float:left;}
.width30 {width: 30%; float:right;}

.width50 {width: 47%; float:left;}
    .width50:nth-child(2n) {margin: 0 3%; }


.dropzone {width: 100%; height: 250px; margin: 3em auto 1em auto; border: 0 !important; background:rgba(0, 0, 0, 0.07) !important; padding: 0 !important; border-radius: 40px; -moz-border-radius: 40px;}
    .dropzone .dz-message {margin: 0 !important;    }

.app-icon-upload:before {    content: "\e903";    font-size: 10em;    display: block;    text-align: center;    padding-top: .25em;    opacity: .4;}

.marginBot1em {margin-bottom: 1em;}

/*Remove Permissions Horizontal ScrollBar*/

#permissionsGrid .k-grid-content
{
   overflow-x: visible;
}

span.icon { padding-left: 20px; background-repeat:no-repeat;}
span.icon-folder { background-image: url(../images/icons/folder.png); }

.rootLink { padding: .75em 0; color:#000; font-size: 1em; text-decoration: none;}

.ui-dialog,.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background-color:#fff !important;}
.ui-draggable {padding: 2em !important; width: 400px !important; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.3); box-shadow: 0 0 100px 0 rgba(0,0,0,.3);}
.ui-dialog-title {font-size: 1.5em;  display:block;}
.ui-dialog-content {margin: 2em 0 !important;}


.tablePreview{
    table-layout: fixed;
}

.tablePreview th, td {
    overflow: hidden;
    width: 30%;
}


/*Form Elements*/

.formItem {position: relative; margin-bottom: 1em;}
.formItem label {padding: 1em 0; text-transform: uppercase; font-weight: bold; position:absolute;}
.formItem input[type="text"], .formItem input[type="password"], .formItem textarea, .formItem select {transition: all 0.2s; display:block; border: 0; position:relative; background: transparent; padding: 3em 0 1em; border-bottom: 1px solid #ccc; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box;}
    .formItem input[type="text"]:focus, .formItem input[type="password"]:focus, .formItem textarea:focus { outline:none;}
.formItem .borderBottom {display: block; z-index:1; position: absolute;  left: 0;  bottom: -2px;  width: 0;  height: 3px;  background-color: #ccc;  content: "";  transition: width 0.2s;}
.formItem:hover .borderBottom { width: 100% !important; background-color:#ccc; }

.formItem textarea { min-height: 150px; display:block;}

/* Login Link */
#LoginLink {color:#3bbde3; font-weight: 300; font-size: 1.5em; text-decoration:none; display:block; margin: 2em 0 1em; text-transform: uppercase;}
.loginForgotPW { text-transform:uppercase; display:block; font-size: 1em; color:#999; text-decoration:none;
}


#divFilePreview img { max-width: 250px; height: auto; }

#spanMessage { color:red; }