/* --------------------------- Basics word-wrap: break-word; -------------------------------- */
    html, body { margin:0; padding:0; min-width:360px;}
    img {border:none;}

    body {font-family: "Open Sans","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;}


    /* --------------------------- Bootstrap Styles -------------------------------- */
    
    
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    a {
        color: #f27c41;
        text-decoration: none;
    }
    
    a:hover, a:focus, a:visited {
        color: #f27c41;
        text-decoration: underline;
    }
    
    a:focus {
        outline: none;
    }
    
    button:focus {
        outline:none;
    }
    
    i:focus {
        outline:none;
    }
    
    img {
        vertical-align: middle;
    }
        
    body {
        font-size: 14px;
        color: #333;
        background-color: #fafafa;
    }
    
    button, input, optgroup, select, textarea {
        margin: 0;
        font: inherit;
        color: inherit;
    }
    
    input {
        line-height: normal;
    }
    
    h1,h2,h3,h4,h5 {
        padding:0;
        margin:0;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.2em;
    }
    
    .indent {
        padding-left:20px;
    }
    
    .light-hue {
        color: #CACACA;
    }
    
    .med-hue {
        color: #B5B5B5;
    }

     
    .btn { 
        cursor:pointer; 
        display:inline-block; 
        vertical-align:top; 
        border:thin solid transparent;
        text-align: center;
        margin-left:2px;
        margin-right:2px;
    }
    
    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.428571429;
        color: #555;
        vertical-align: middle;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    /* --------------------------- Fontawesome Styles -------------------------------- */
    @-ms-viewport       { width: device-width; }
    @-o-viewport        { width: device-width; }
    @viewport           { width: device-width; }

    /* --------------------------------  Button Styles -------------------------------- */

    a.btn-custom.disabled, button.btn-custom.disabled {
        opacity:0.5;
    }
    
    a.btn-custom, button.btn-custom {
        border-style:solid;
        border-width:2px;
        
        border-radius: 4px 4px 4px 4px;
        cursor: pointer;
        margin: 0;
        padding: 10px;
        text-decoration:none;
        font-family: 'Lato',sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        background-color:white;
    }
    
    /* -------------------- Shapes & Transitions ----------------- */
    .rotate {
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
         
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
         
        overflow:hidden;
     
    }  

    .circle {
        border-radius: 50%;
        behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    }

    /* --------------------------- Misc -------------------------------- */
    
    .hide-hard {display:none !important;}
    
    .hide-soft, .hide {display:none;}
    
    .left {text-align:left;}

	.middle {text-align:center;}

	.right {text-align:right;}
	
	.clip {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .flex {
        display:flex;
    }
    
    .fixed {
        position:fixed;
    }
    
    .absolute {
        position:absolute;
    }
    
    .text-justify-center {
        font-size: 15pt;
        margin: 150px auto;
        width: 200px;
        text-align: center;
        font-weight:100;
    }
    /* --------------------------------  Bootstrap (type)  Grid -------------------------------- */
    
    .row {
        
    }
    
    .row:before {
        display: table;
        content: " ";
    }
    
    .row:after {
        clear: both;
    }

    /* 4, 3, 2 column layout */
    .row .col-4, .row .col-3, .row .col-2, .row .col-2-25, .row .col-2-75, .row .col-1 {
        /*float:left;*/
        display:inline-block;
    }
    
    .row .col-4 {
        width: 33.33333333%;
    }
    
    .row.collapse .col-4 {
        width: 33.33333333%;
    }

    .row .col-3 {
        width: 33.33333333%;
    }
    
    .row.collapse .col-3 {
        width:50%;
    }
    
    .row .col-2 {
        width:50%;
    }
    
    .row.collapse .col-2 {
        width:100%;
    }
    
    .row .col-2-25 {
        width:25%;
    }
    
    .row .col-2-75 {
        width:75%;
    }
    
    .row .col-1 {
        width:100%;
    }
    
    
	/* --------------------------------  Bootstrap Buttons -------------------------------- */
    .btn-primary {
        color: #fff;
        background-color:#f27c41;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }

    .btn-primary:hover, .btn-primary:focus {
        color: #fff;
        opacity: 1;
        filter: alpha(opacity=100);
        text-decoration:none;
    }
    
    .btn-bootstrap {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.428571429;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    
    .actions ul {
        list-style:none;
        padding:0;
        margin:0;
        
        vertical-align:top;
        
        display:inline-block;
    }
    
    /* --------------------------------  Cards  ---------------------- */

    /* --------------------------------  Preview Cards (for file previews)  ---------------------- */

    .preview-card {
        border: thin solid #E1E1E1;
        padding: 10px;
        border-radius: 0.42857em;
        background-color: white;
    }
    
    .preview-card-showcase {
        display: flex;
        flex-wrap: nowrap;
        
        border-bottom: thin solid #E1E1E1;
        padding-bottom: 15px;
    }
    
    .preview-card-showcase-profile .profile-picture {
        width:50px;
        height:50px;
        font-size:16pt;
    }
    
    .preview-card-showcase-profile a:hover, .preview-card .preview-card-showcase-profile a:visited {
        text-decoration:none;
    }
    
    .preview-card-showcase .preview-card-showcase-details > div {
        padding-left:8px;
    }
    
    .preview-card-showcase-name {
        font-size:14pt;
    }
    
    .preview-card-showcase .file-details-date {
        padding-top:5px;
    }
    
    .preview-card-title {
        font-size:13pt;
        font-weight:100;
        color:#7C7C7C;
    }
    
    .preview-card-toolbar {
        height: 48px;
        margin-top: 5px;
        padding: 8px 0;
    }
    
    .preview-card-toolbar ul.left {
        float:left;
    }
    
    .preview-card .preview-card-toolbar ul.right {
        float:right;
    }
    
    .preview-card-toolbar ul {
        margin:0;
        padding:0;
    }
    
    .preview-card-toolbar ul > li {
        display:inline-block;
        list-style:none;
        cursor:pointer;
        
        margin: 0 5px;
    }
    
    .preview-card .preview-card-desc {
        font-size:1.2em;
        border-top:thin solid #E1E1E1;
        margin-top:8px;
    }
    
    .preview-card .preview-card-desc {
        font-size:1.2em;
        border-top:thin solid #E1E1E1;
        margin-top:8px;
    }
    
    .preview-card .preview-card-date {
    }
    
    /* ------------------------ Preview Card Media Queries  --------------------- */

    @media screen and (max-width: 768px) {
        
        .preview-card .preview-card-desc {
            margin-top:0;
            font-size:1em;
        }
        
        /*
        .preview-card a.btn-sprite {
            font-size: 1.3em;
            padding: 0 7px;
        }
        */
    }


    /* --------------------------------  Compact  ---------------------- */
    
    .compact {
        width:100%;
        padding:5px;
        text-align:left;
        cursor:pointer;
        border:thin solid transparent;
    }
    
    .compact:hover {
        border:thin solid #DDDDDD;
        -moz-border-radius: 6px; 
        -webkit-border-radius: 6px; 
        border-radius: 6px;
    }
    
    .compact > a > div {
        display:inline-block;
    }
    
    .compact .compact-icon {
        width:32px;
    }
    
    .compact .compact-icon img {
        height:32px;
        width:32px;
    }
    
    .compact .compact-fa {
        font-size:25pt;
        line-height:25pt;
    }
    
    .compact .compact-file-name > span {
        text-decoration:none;
        margin-left:8px;
    }
    
    .compact .compact-file-name {
        width:75%;
        text-align:left;
        padding-bottom:3px;
    }
    
    .compact .compact-file-size {
        width:25%;
        float:right;
        padding-top:6px;
        text-align:right;
        font-size: 10pt;
        color: silver;
    }
    
    /* ------------------------ Engage Card --------------------------- */
    
    .engage-card {
        border-width: 1px;
        border-radius: .42857em;
        border-style: solid;
        border-color: #E1E1E1;
        overflow: hidden;
        margin-bottom:20px;
    }
    
    .engage-card:hover {
        border-color:#C7C7C7;
    }
    
    .engage-card a:hover {
        text-decoration:none;
    }
    
    .engage-card .engage-card-container {
        background-color:white;
        
        float: left;
        width: 100%;
        clear: both;
        
        font-size: 14px;
        line-height: 1.3em;
    }
    
    .engage-card .engage-card-image > div:before {
        content: "";
        display: block;
        
        padding-top: 100%;
    }
    
    .engage-card .engage-card-image .engage-card-image-background {
        opacity: 1;
        transition-duration: 0.1s;
        
        background-size: cover;
        background-repeat: no-repeat;
        
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.9,0,.9,0);
        
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
    }
    
    .engage-card .engage-card-image-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position:center;
    }
    
    .engage-card .engage-card-image-overlay.play {
        background-image: url("../img/play-button-overlay.png");
    }
    
    .engage-card.loading .engage-card-image .engage-card-image-background {
        background-size: auto;
        background-position: center;
    }
    
    .engage-card.loading .engage-card-image-overlay {
        display:none;
    }
    
    .engage-card .engage-card-image img {
        width: 100%;
        height: 100%;
        opacity: 0;
        border:0;
    }
    
    .engage-card .engage-card-image > div:before {
        padding-top: 100%;
    }
    
    .engage-card .engage-card-image > div {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    
    .engage-card .engage-card-file {
       vertical-align: top; 
       display:flex;
       flex-wrap: nowrap;
       justify-content: space-between;
    }
    
    .engage-card .engage-card-file .engage-card-file-icon {
        padding:0 7px;
    }
    
    .engage-card .engage-card-file .engage-card-file-icon i {
        font-size: 2.5em;
        line-height: 2em;
    }
    
    .engage-card .engage-card-file .engage-card-file-details {
        flex-grow: 1;
        min-width: 0;
    }
    
    .engage-card .engage-card-file .engage-card-file-details h2 {
        max-height: 1.3em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height:1.4em;
        font-size: 1.2em;
        margin: 0.9em 0 0 0;
        
        font-weight:500;
    }
    
    .engage-card .engage-card-toolbar ul {
        margin:0;
        padding: 5px 0;
        white-space:nowrap
    }
    
    .engage-card .engage-card-toolbar ul > li {
        display:inline-block;
        list-style:none;
        vertical-align:top;
    }
    
    .engage-card .engage-card-desc {
        font-size:1.2em;
        padding:0 10px;
    }
    
    .engage-card .engage-card-desc > div {
        border-top: thin solid #E1E1E1;
    }
    
    .engage-card .engage-card-date {
        padding:0 10px;
        padding-bottom:10px;
    }
    
    .engage-card .engage-card-showcase {
        display: flex;
        flex-wrap: nowrap;
        padding:10px;
    }
    
    .engage-card .engage-card-showcase-profile .profile-picture {
        width: 50px;
        height: 50px;
        font-size: 16pt;
    }
    
    .engage-card .engage-card-showcase-profile a:hover, .engage-card .engage-card-showcase-profile a:visited {
        text-decoration:none;
    }
    
    .engage-card .engage-card-showcase-details {
        line-height: initial;
        font-size:14pt;
        padding-left:8px;
    }
    
    .engage-card .engage-card-showcase-details .engage-card-showcase-name {
        color: #7C7C7C;
        font-size:13pt;
        font-weight:100;
    }
    
    
    /* ------------------------ Content Preview - Engage Card - Large ------------------- */
    
    .engage-card.large .engage-card-image > div:before {
        padding-top: 50%;
    }
    
    /* ------------------------ Content Preview - Engage Card - X-Small (no preview image) ----------------- */
    
    .engage-card.x-small .engage-card-image {
        display:none;
    }
    
    /* ------------------------ Engage Media Queries  --------------------- */

    @media screen and (max-width: 768px) {
        
        .engage-card .engage-card-file .engage-card-file-icon i {
            font-size: 2em;
        }
        
        .engage-card .engage-card-desc {
            margin-top:0;
            padding-top:0;
            font-size:1em;
        }
        
        .engage-card .engage-card-file .engage-card-file-details h2 {
            font-size:1em;
            line-height:1.2em;
        }
        
        .engage-card .engage-card-showcase-profile .profile-picture {
            width:30px;
            height:30px;
            font-size:10pt;
        }
        
        .engage-card .engage-card-showcase-details {
            font-size:12pt;
            padding-left:5px;
        }
        
        .engage-card .engage-card-showcase-details .engage-card-showcase-name {
            display:none;
        }
        
    }
    
    /* ------------------------ File Details ----------------------------------------- */
    
    .file-details {
        width:100%;
        padding-bottom:15px;
        color: #8899A6;
        font-size:0.8em;
    }
    
    .file-details > div {
        float:left;
    }
    
    .file-details .file-details-size {
        width:100%;
    }
    
    .file-details-date {
        color: #8899A6;
        font-size: 0.8em;
    }
    
    /* ------------------------ App ----------------------------------------- */
    
    /* By default hide the app integration */
    
    html.disable-app .app {
        display:none;
    }
    
    html.disable-app-auth .app-auth {
        display:none;
    }
    
    html.disable-app-owner .app-owner {
        display:none;
    }
    
    html.use-app-auth .app-no-auth {
        display:none;
    }