/**
 * YAWIK
 *
 * @filesource
 * @copyright (c) 2013-2017 Cross Solution (http://cross-solution.de)
 * @license   MIT
 */

/**
 * we've replaced glyphicons with font-awesome. therefore bootstrap/bootstrap.less from 
 * the bootstrap dist was copied to the local bootstrap.less. 
 * include "glyphicons.less" was replaces by "font-awesome/font-awesome.less"
 **/

@import "yawik-core.less";
@import "general.less";

// the default values of the bootstrap global variables are defined in bootstrap/variables.less.
// you can overwrite them here. 

@navbar-height:                     50px;
@footer-height:                     25px;

@navbar-default-link-active-color:  @brand-primary;  
@nav-pills-active-link-hover-color: @yk-color-orange;

@nav-pills-active-link-hover-bg:    darken(@brand-primary, -80%);
@input-border-focus:                darken(@brand-primary, -20%);

@dropdown-link-active-bg:           @yk-color-orange;

// Brand colors
// -------------------------
@brand-primary:                     @yk-color-blue;

// Links
// -------------------------
@link-color:                        @brand-primary;
@link-hover-color:                  @yk-color-orange;

// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color:		        #FFFFFF;
@navbar-inverse-bg:                 @brand-primary;

// Inverted navbar links
@navbar-inverse-link-color:         #FFFFFF;
@navbar-inverse-link-hover-color:   @link-hover-color;
@navbar-inverse-link-hover-bg:      darken(@brand-primary, 5%);


// YAWIK Variables
@colorError:                        #B94A48;
@colorErrorShadow:                  #D59392;
@backgroundFieldset:                @yk-color-background-fieldset;


@font-size-h1:                      26px;
@font-size-h2:                      24px;
@font-size-h3:                      22px;
@font-size-h4:                      20px;
@font-size-h5:                      18px;
@font-size-h6:                      16px;

body {
     position: relative;
     margin-top: calc(@navbar-height - 5px);
}


th {
    background-color: @table-bg-header;
}

#yk-topbar {
    .navbar;
    .navbar-inverse;
    .navbar-fixed-top;
}

main {
	margin-bottom: calc(@footer-height + 10px);
}

/*
 * Scrollable modal
 */
.modal-scrollable {
	.modal-body {
		max-height: 450px;
		overflow-y: auto;
	}
}

.yk-input-group {
}


/**
 * footer on the page
 */
#yk-footer {
    .hidden-xs;
    .navbar;
    .navbar-fixed-bottom;
	height:	    @footer-height;
	min-height: @footer-height;
	max-height: @footer-height;
	background-color: @gray-lighter;
}

// Sidebar

#sidebar {
	> div {
		margin-top: 20px;

 	}
  	ul li.active a {
		background-color: @yk-color-background-sidebar-active;
	}
} 

.buttons-row > * {
	margin-right: 15px;
}
form .input-error,
form .errors {
	color: @colorError;
}
form .input-error input
{
	border-color: @colorError;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

form .input-error input:focus {
	border-color: @yk-color-error-border;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px @colorErrorShadow;
}

.form-inline fieldset .fieldset-content .controls-row {
	margin-bottom: 15px;
}
fieldset legend > a {
	margin-top: 5px;
	margin-right: 5px;
}
fieldset fieldset a.remove-item {
	margin-top: -15px;
	margin-right: 5px;
}


#params-search-wrapper {
    .col-xs-6 {
        padding-left: 0;
        padding-right: 0;
    }
}


.btn-group {
    .col-md-3,
    .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
* Add & remove buttons
*/
.yk-form-add {
    .btn;
    .btn-default;
    .pull-right;
}
.yk-form-remove {
    .btn;
    .btn-default;
    .pull-right;
}

#attachments input {
    border: none;
    box-shadow: none;
    padding: 0 12px;
}

#profiles {
    margin-bottom:20px;
}

/**
* used in layout.phtml
*/
.yk-notifications {
    margin-top: 10px;
    padding: 0 15px;
}
.yk-logo-list {
    width: 100px;
    height: 50px;
    margin: 5px;
    float: left;
}
.yk-logo-sm {
    max-height: 40px;
    max-width: 80px;
}

// Login Box
#form-forgot-password,
#form-user-password-form,
#form-login-with-social-bottons {
     > .form-content {
        animation: 1s ease-in-out 0.25s normal forwards 1 running reveal-banner;
        border-radius: 5px;
        background: rgba(52, 27, 43, 0.5) none repeat scroll 0 0;
        color: #fff;
        display: inline-block;
        opacity: 0.8;
        padding: 3em;
        a {
            color: #fff;
        }
        label {
            font-size: 85%;
        }
    }
}

// 
#jobs-list .btn-toolbar {
	border: 0;
}

// eg. login box
.panel-tabbed {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
	.panel-default;
}

table.assign-user-list tr {
    cursor: pointer;
}

// Navigation of Job Wizard
#yk-login,
#wizardcontainer-jobs-form-categoriescontainer,
#wizardcontainer-jobs-form-job {
    .pager {
        border-bottom-color: @yk-btn-primary-border;
        a {
            border-radius: @yk-btn-border-radius-base;
            background-color: @yk-tab-bg;
            color: @yk-tab-color;
        }
        a:focus,
        a:hover {
            border-bottom-color: @yk-btn-primary-hover-border;

            background-color: @yk-btn-primary-hover-bg;
            color: @yk-tab-hover-color;
        }
    }
    .nav {
        a {
            line-height: 0.5em;
            border-top-color: #fff;
            border-radius: 10px 10px 0 0;
            background-color: @yk-tab-bg;
            border-bottom-color: @yk-btn-primary-hover-border;
            border-left-color: #fff;
            border-right-color: #fff;
            color: @yk-tab-color;
        }
        a:focus,
        a:hover {
            border-top-color: @yk-tab-hover-color;
            border-bottom-color: @yk-btn-primary-hover-border;
            background-color: @yk-tab-hover-bg;
            color: @yk-tab-hover-color;
        }
        .active {
            a {
                border-top-color: @yk-btn-primary-hover-border;
                border-bottom-color: @yk-btn-primary-hover-border;
                background-color: @yk-tab-active-bg;
            }
        }
    }
}

#language-switcher {
	width: 110px;
}