/* WebSpring Extension */

@webspringBlue: #0088cc;

@webspringBlueTwenty: rgba(red(@webspringBlue), green(@webspringBlue), blue(@webspringBlue), 0.2);
@webspringBlueFourty: rgba(red(@webspringBlue), green(@webspringBlue), blue(@webspringBlue), 0.4);
@webspringBlueSixty: rgba(red(@webspringBlue), green(@webspringBlue), blue(@webspringBlue), 0.6);
@webspringBlueEighty: rgba(red(@webspringBlue), green(@webspringBlue), blue(@webspringBlue), 0.8);

@darknavy: #2C3C4B;

@wsBlue2: #066CAA;
@wsAqua: #2ABF9E;
@wsAqua2: #1C8069;
@wsDark: #394B5E;
@wsDark2: #23313E;
@wsRed: #CC0033;
@wsRed2: #970026;

@wsOrange: #F69431;
@wsOrange2: #F17430;

@classyGrey: #f5f5f5;

/* LESS vars */
    .rounded-corners (@radius: 3px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }
    .custom-icon {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }


/* Webspring Dashboard Layout, Look & Feel */

    .dashboard .selectedtab {
        background-color: #fff;
        padding: 20px;
    }

    /* Header */
    .header {
        border-top: 3px solid @darknavy;
        background: url('/assets/admin/simple/images/bg_header_42.png') left top repeat-x;
    }

    /* Nav-tabs */
    .nav-tabs .tab a:hover, .nav-tabs .tab.active a, .nav-tabs .tab.active a:hover {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        cursor: pointer;
    }


    .tab-content { overflow: visible; }
    .nav.nav-tabs .tab i:before {
        /*.custom-icon;*/
        display: block;
        font-size: 26px;
        height: 26px;
        margin-top: 3px;
    }

    /*.nav.nav-tabs .tab-content i:before { content: "\e053"; }
    .nav.nav-tabs .tab-media i:before { content: "\e010"; }
    .nav.nav-tabs .tab-options i:before { content: "\e605"; }
    .nav.nav-tabs .tab-seo i:before { content: "\e052"; }*/

    @media (min-width: 500px) {
        .portal-header .account-details { float: right; }
        .portal-header .heading { float: left; }
        .header .logo { float: left; }

        .details-control-group {
            position: absolute;
            top: 0;
            right: 0;
        }

        .nav.nav-tabs { background-color: transparent; margin-top: 5px; }

        .nav.nav-tabs .tab {
            text-align: center;
            margin: 0;
            min-width: 120px;
        }
        .nav.nav-tabs .tab a {
            height: 50px;
            padding: 10px;
            margin: 0;
            color: #999999;
        }

        .nav.nav-tabs .tab a:hover { background-color: rgba(255,255,255,0.75); }
        .nav.nav-tabs .tab.active a, nav.nav-tabs .tab.active a:hover { background-color: #fff; }
        .nav.nav-tabs .tab.active a i { color: @webspringBlue; }
        .nav.nav-tabs .tab a:hover, .nav.nav-tabs .tab.active a {
            margin: 0;
            color: #333333;
            padding: 10px;
            height: 50px;
            line-height: 20px;
        }
        .nav.nav-tabs .tab.active a:hover {
            margin: 0;
        }
        .nav.nav-tabs .tab a span {
            padding: 1px 0 5px 0;
            display: block;
            font-size: 13px;
            text-transform: capitalize;
        }




    }

/* Webspring Colours (flat UI) */
.focusglow {
    border-color: @webspringBlueEighty;
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @webspringBlueSixty;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @webspringBlueSixty;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @webspringBlueSixty;
}

h1 {
    color: @webspringBlue;
}

.btn {
    /* cool coloured */
    background: @webspringBlue;
    color: #fff;
    /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);*/
    /* but now make it flat... */
    text-shadow: none;
    border: 0;
    box-shadow: none;
    .rounded-corners;
}
.btn:hover {
    background: @wsBlue2;
    color: #fff;
}

.btn.btn-save.btn-large {
    height: 30px;
    line-height: 30px;
    width: 150px;
    padding: 5px 10px;
    font-size: 16px !important;
    margin-right: 4px;
}
    .btn.btn-save.btn-large:before { display: none; }
    .btn.btn-save.btn-large i { margin-top: -4px; position: relative; left: -4px; }
    .btn.btn-save.btn-large i:before { font-weight: normal; font-size: 24px; }

.btn.btn-remove { background: @wsRed; }
.btn.btn-remove:hover { background: @wsRed2; }
.btn.btn-remove:before { content: ""; }

.btn.btn-add, .btn.btn-minus, .btn.btn-export { background: @wsOrange; }
.btn.btn-add:hover, .btn.btn-minus:hover, .btn.btn-export:hover { background: @wsOrange2; }

.btn.btn-clear, .btn.btn-cancel { background: #999; }
.btn.btn-clear:hover, .btn.btn-cancel:hover { background: #666; }

select:focus, input:focus, textarea:focus { .focusglow; }

.media-item.active {
    .focusglow;
    margin-top: 10px;
    margin-bottom: 10px;
}
.media-tab .btn-add { min-width: 148px; margin-right: 1px; }

/* Custom */
ul.ng-valid-date .icon-chevron-left:before { content: "\e611"; }
ul.ng-valid-date .icon-chevron-right:before { content: "\e612"; }

ul.dropdown-menu { background: @webspringBlue; color: rgba(255,255,255,0.8); }
ul.dropdown-menu .muted { color: rgba(0,0,0,0.5); }
ul.dropdown-menu .btn { background: #fff; color: #333; }
ul.dropdown-menu .btn:hover { background: #E0E0E0; }
ul.dropdown-menu .btn.btn-info { background: @wsDark; color: #fff; }
ul.dropdown-menu button.btn.btn-block { line-height: 21px; }

/* Typeahead */

ul.typeahead.dropdown-menu { background: #fff; color: rgba(255,255,255,0.8); }
ul.typeahead.dropdown-menu .active > a { background: #fff; color: @webspringBlue; }


/* Login animations/transitions */

.login-toggle {
    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -ms-transition: linear 1s;
    -o-transition: linear 1s;
    transition: linear 1s;
}

.login-toggle.ng-enter {
    opacity: 0;
}

.login-toggle.ng-enter-active {
    opacity: 1;
}

.login-toggle.ng-leave {
    opacity: 1;
}

.login-toggle.ng-leave-active {
    opacity: 0;
}



/* Login Box */

#login-box {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #43484D;
}
    #login-box .login-inner {
        width: 410px;
        height: 290px;
        box-sizing: border-box;
        padding: 20px;
        margin: 100px auto;
        background-color: #33373B;
        .rounded-corners(4px);
    }
        #login-box .title {
            color: #fff;
            font-size: 26px;
        }
        #login-box .description {
            font-size: 16px;
            color: #999999;
            margin: 10px 0;
        }
        #login-box input {
            height: 34px !important;
            border: 2px solid #54575C;
            .rounded-corners(4px);
        }
        #login-box input:focus {
            border: 2px solid @wsBlue2;
        }
        #login-box input, #login-box .btn {
            width: 100%;
            margin: 8px 0;
            .rounded-corners;
        }
        #login-box .btn {
            /*background-image: url('/assets/admin/simple/images/bg_header_50.png');*/
            background-repeat: repeat-x;
            background-position: left top;
            border: none;
            color: #fff;
            text-shadow: none;
            font-size: 20px !important;
            height: 50px;
        }
        #login-box .btn .icon-lock {
            font-size: 12px;
            color: rgba(0,0,0,0.25);
            line-height: 25px;
        }











/* animations */

.updated-true {
    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -ms-transition: linear 1s;
    -o-transition: linear 1s;
    transition: linear 1s;

    background-color: #c6eaff;
}



#add-media-box {
    width:100%;
    height: 100%;
    z-index: 99999;
    background-color: #43484D;
    .rounded-corners;
    padding: 20px;
    margin: 10px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    #add-media-box .add-media-inner { text-align: center; }

        #add-media-box .upload-inner {
            width: 25%;
            float: left;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding: 15px;
            background-color: #33373B;
            .rounded-corners;
        }
            #add-media-box .upload-inner.choose-existing {
                width: 74%;
                float: right;
            }


        #add-media-box form { margin-bottom: 0px; }
            #add-media-box .title {
                color: #fff;
                font-size: 26px;
                text-align: left;
            }
            #add-media-box .description {
                font-size: 16px;
                color: #999999;
                margin: 10px 0;
                text-align: left;
            }
            #add-media-box input {
                height: 34px !important;
                border: 2px solid #54575C;
            }
            #add-media-box input:focus {
                border: 2px solid #F9A419;
            }
            #add-media-box input[type='file'] { color: #ccc; height: auto !important; }

            #add-media-box input, #add-media-box .btn {
                width: 100%;
                margin: 8px 0;
                .rounded-corners;
            }
            #add-media-box .progress-bar {
                width: 100%;
            }
            #add-media-box .percent { color: #fff; }
            #add-media-box .btn {
                /*background-image: url('/app/images/bg_orange_50.png');*/
                background-repeat: repeat-x;
                background-position: left top;
                border: none;
                color: #fff;
                text-shadow: none;
                font-size: 20px !important;
                height: 50px;
            }
            #add-media-box .btn i {
                font-size: 12px;
                color: rgba(255,255,255,0.5);
                line-height: 25px;
            }

            #add-media-box .upload-inner.choose-existing .description { float: left; }
            #add-media-box .upload-inner.choose-existing .tb-controls.search { background: transparent; }
            #add-media-box .upload-inner.choose-existing .search input { border: 2px solid #aaa; }
            #add-media-box .upload-inner.choose-existing table { background-color: #fff; }
            #add-media-box .table-summary { color: #999999; }
            #add-media-box .upload-inner.choose-existing .pager a { color: #999999; }
            #add-media-box .upload-inner.choose-existing .pager a.active, #add-media-box .upload-inner.choose-existing .pager a:hover {
                background-color: #43484D;
                color: #999;
            }
            #add-media-box .upload-inner.choose-existing .tb-controls.search.quicksearch {
                margin-bottom: 5px;
                padding: 0;
            }
            #add-media-box .upload-inner.choose-existing .media.preview {
                max-width: 100px;
                max-height: 100px;
            }


.progress-bar {
    width: 300px; height: 14px;
    border-radius: 10px;
    border: 1px solid #CCC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95));
    border-image: initial;
}
.uploaded {
    padding: 0;
    height: 14px;
    border-radius: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
    border-image: initial;
}


/* Paging */
.pager li { margin: 0 1px; }
.pager a {
    color: #34495e;
}
.pager a:hover, .pager a.active {
    color: @webspringBlue;
}
.pager a:hover, .pager a.active {
    background-color: #f5f5f5;
}

/* Results Tables */

 .dashboard .results .result.table thead tr th {
     background-color: #E0E0E0;
     color: #222;
     border-bottom: 1px solid #fff;
 }

  .dashboard .results .result.table thead tr th:first-child { border-top-left-radius: 3px; }
  .dashboard .results .result.table thead tr th:last-child { border-top-right-radius: 3px; }
  .dashboard .results .result.table tbody tr:last-child td:first-child { border-bottom-left-radius: 3px; }
  .dashboard .results .result.table tbody tr:last-child td:last-child { border-bottom-right-radius: 3px; }

 .dashboard .results .result.table.table-striped tbody tr:nth-child(odd) td, .dashboard .results .result.table.table-striped tbody tr:nth-child(odd) th {
    background-color: #f5f5f5;
    border-top: 1px solid #E8ECEE;
    border-bottom: 1px solid #E8ECEE;
 }
 .dashboard .results .result.table.table-striped tbody tr:nth-child(even) td, .dashboard .results .result.table.table-striped tbody tr:nth-child(even) th {
    background-color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
 }
 .dashboard .results .result.table tr td {
    border-top: 1px;
    border-bottom: 0;
 }
 .dashboard .results .result.table.table-striped tbody tr:nth-child(even) td:first-child { border-left: 1px solid transparent; }
 .dashboard .results .result.table.table-striped tbody tr:nth-child(even) td:last-child { border-right: 1px solid transparent; }
 .dashboard .results .result.table.table-striped tbody tr:nth-child(odd) td:first-child { border-left: 1px solid transparent; }
 .dashboard .results .result.table.table-striped tbody tr:nth-child(odd) td:last-child { border-right: 1px solid transparent; }

 .dashboard .results .result.table.table-striped tbody tr:hover td, .dashboard .results .result.table.table-striped tbody tr:hover th,
 .dashboard .results .result.table.table-striped tbody tr.active td, .dashboard .results .result.table.table-striped tbody tr.active th,
 .dashboard .results .result.table.table-striped tbody tr.new td, .dashboard .results .result.table.table-striped tbody tr.new th {
    background-color: @webspringBlueTwenty;
    border-top: 1px solid @webspringBlueFourty;
    border-bottom: 1px solid @webspringBlueFourty;
 }

 .dashboard .results .result.table.table-striped tbody tr:hover td:first-child, .dashboard .results .result.table.table-striped tbody tr.active td:first-child, .dashboard .results .result.table.table-striped tbody tr.new td:first-child {
     border-left: 1px solid @webspringBlueFourty;
 }
 .dashboard .results .result.table.table-striped tbody tr:hover td:last-child, .dashboard .results .result.table.table-striped tbody tr.active td:last-child, .dashboard .results .result.table.table-striped tbody tr.new td:last-child {
     border-right: 1px solid @webspringBlueFourty;
 }
 .dashboard .results .result.table a { cursor: pointer; }

/* Content Tags */
    ul.content-tags li.tag {
        background-color: @webspringBlue;
        color: #fff;
    }
        ul.content-tags li.tag:hover, ul.content-tags li.tag.loading {
            background-color: @wsBlue2;
        }


 /* Datepickers */
 .icon-calendar.datepickle {
    color: #aaa;
    font-size: 16px;
    margin-left: 2px;
    cursor: pointer;
 }
 .icon-calendar.datepickle:hover {
     color: #666;
 }



 /* Probably belongs in dashboard.css */
 .dashboard .template-main .dashboard-overview.main {
     background-color: transparent;
     padding: 0;

 }

 .dashboard-overview > a {
     padding: 40px;
     box-sizing: border-box;
     text-align: center;
     background: #fff;
     margin: 20px;
     display: inline-block;
     .rounded-corners;
     min-width: 150px;
     min-height: 100px;
     font-size: 18px;
     vertical-align: middle;
     text-decoration: none;
 }
 .dashboard-overview > a:hover {
     color: #fff;
     background-color: @webspringBlue;
 }
 .dashboard-overview > a i {
     display: block;
     font-size: 28px;
     margin-bottom: 5px;
 }