/*Variabili globali*/
@import "bootstrap/bootstrap.less";

@paletteDominante: rgb(12, 153, 213);
@paletteDominanteChiaro: rgb(50, 207, 235);
@bianco: white;

@custom-color: rgb(12, 153, 213);

@backgroundColor: rgb(243, 243, 243);
@fontColor: rgb(26, 26, 26);
@fontErrorColor: rgb(212, 63, 58);

@fontFamily: 'Raleway', sans-serif;

@paddingContenuto: 5px;

/* definizione nuovi stili */

@border: transparent;
@heading-text-color: rgb(26, 26, 26);
@heading-bg-color: white;
@heading-border: none;
@panel-border-radius: 0;



/*@brand-primary: darken(#f48124, 5%);
  @brand-primary-light: lighten(@brand-primary, 10%);
  @brand-primary-dark: darken(@brand-primary, 5%);
*/
@brand-primary: rgb(12, 153, 213);
@brand-primary-light: lightskyblue;
@brand-primary-dark: rgb(7, 94, 131);


h1, h2, h3 {
    color: @brand-primary;
}

h3 {
    font-size: 1.5em;
}


/*----------------------------------------------------------------------------------*/
/*-------------------              TEMPLATES         -------------------------------*/
/*----------------------------------------------------------------------------------*/
/* Classe che Definisce l'aspetto dei DIV di una certa importanza con un Titolo */

/* Classe che definisce il Carattere del Font */
.FontTemplate {
    font-family: @fontFamily;
    color: @fontColor;
}

/* Classe che definisce gli Input */
.InputTemplate {
    .FontTemplate
}

/* Classe che Definisce l'aspetto dei DIV di una certa importanza */

.DivTemplate(@radius: 0px, @padding: 3px, @background-color: @backgroundColor) {
    .panel;
    .panel-default;


    &:hover {
    }
}

.DivHeaderTemplate(@radius) {
    .DivTemplate(5px, 0px);
    /*Header*/
    div.header_div {
        padding: @paddingContenuto;
        font-weight: bold;
        font-size: large;
        .panel-heading;
    }
    /*Contenuto*/
    div.content_div {
        .panel-body;
    }
}

/* Classe che definisce gli inserti per inserire i campi */
.ElementoInputTemplate {
    //padding: @paddingContenuto / 2;
    .make-sm-column(12);
    .form-group;

    @colonna1: 4;
    @colonna2: 8;

    // Intestazione
    label:first-child {
        //padding-top: @paddingContenuto;
        /*.make-md-column(@colonna1);*/
        /*.text-right;*/
    }
    // Input del Valore -----
    div:nth-child(2) {
        .input-group;
    }

    input[type=checkbox]:nth-child(2) {
        /*.make-md-column(@colonna2);*/
        /*width: auto;*/
        .form-control;
        .InputTemplate;
    }

    input[type=date]:nth-child(2) {
        /*.make-md-column(@colonna2);*/
        /*width: auto;*/
        .form-control;
        .InputTemplate;
    }

    input:nth-child(2), textarea:nth-child(2) {
        /*.make-md-column(@colonna2);*/
        /*width: 100%;*/
        .form-control;
        .InputTemplate;
    }

    select:nth-child(2) {
        /*.make-md-column(@colonna2);*/
        .form-control;
        .InputTemplate;
    }

    span:nth-child(2) {
        /*.make-md-column(@colonna2);*/
        /*width: 100%;*/
        //padding-top: @paddingContenuto;
        .form-control;
        .InputTemplate;
    }
}


/*----------------------------------------------------------------------------------*/

html {
}

body {
    color: @fontColor;
    font-family: @fontFamily;
    margin: 0;
    padding: 0;
    //min-width: 1100px; //600px;
}

.col-with-padding {
    padding: 0.5em;
}

.col-with-margin {
    margin: 1%;
}

a {
    &:hover {
        cursor: pointer;
    }
}

.text-bianco {
    color: white;
    text-shadow: grey 1px 1px 1px;
}

.text-grigio {
    color: lightgray;
}

.text-blu {
    color: #337ab7;
}

.text-shadow {
    text-shadow: rgba(0,0,0,0.1) 3px 3px 5px;
}

.text-active:hover {
    text-shadow: white 0px 0px 5px;
    cursor: pointer;
}

/*dimensioni icone*/

.fa-adapt {
    /*font-size: 12vw;*/
    font-size: 3em;
}

.fa-adapt-medium {
    font-size: 6vw;
}

.fa-adapt-small {
    font-size: 2vw;
}

.fa-adapt-smallbar {
    font-size: 1.5vw;
}

.fa-adapt-extrasmall {
    font-size: 1vw;
}

div.primary-line {
    background-color: @brand-primary;
    height: 1px;
}

div.primary-line-md {
    background-color: @brand-primary;
    height: 2px;
}

div.primary-line-lg {
    background-color: @brand-primary;
    height: 5px;
}

div.separatore-sm {
    height: 5px;
}

div.separatore {
    height: 10px;
}

div.separatore-lg {
    height: 30px;
}

.label-h1-highlight {
    .h1;
    margin-top: 0;
}

.label-h2-highlight {
    .h3;
    margin-top: 0;
}

.label-h3-highlight {
    .h3;
    margin-top: 0;
    color: @brand-primary;
}

.label-h4-highlight {
    .h4;
    margin-top: 0;
    color: @brand-primary;
}

header, footer {
    padding: @paddingContenuto;
}

.div_template {
    .DivTemplate(5px,3px);
}

.div_template_borderd {
    .DivTemplate(5px,3px,none);
}

.div_header {
    .DivHeaderTemplate(5px);
}


/* overflow componenti bootstrap */


.form-control {
    &:focus {
        border-color: @brand-primary-light;
        box-shadow: rgba(0,0,0,0.2) 0 0 10px;
    }
}

.jumbotron {
    .jumbotron;
    background-color: lighten(@brand-primary, 50%);
    border: none;
    color: @fontColor;
}

/* CUSTOM componenti bootstrap */

.text-custom {
    color: @custom-color;
}

.btn-custom {
    .button-variant(@bianco, @brand-primary, darken(@custom-color, 10%));
}
.btn-disabled {
    .button-variant(darkgray, lightgray, darkgray);
}

.panel-custom {
    .panel-variant(@border, @panel-default-text, @backgroundColor, @heading-border);
}
.panel-custom2 {
    .panel-variant(@border, @panel-default-text, @backgroundColor, @paletteDominanteChiaro);    
}

.alert-custom {
    .alert-variant(@custom-color, darken(@custom-color, 5%), darken(@custom-color, 30%))
}

.navbar-custom {
    .navbar-default;
    /*.no-border;*/
    .navbar-brand {
        float: none;

        img {
            margin-top: 5px;
            padding: 0px;
        }
    }
}

/*BUGFIX MODAL*/
.modal-backdrop {
    .modal-backdrop;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
}

.modal {
    .modal;
    z-index: 1000001;
}


.icon-pages {
    color: @brand-primary;
}

.no-border {
    border: none;
}

.has-error {
    color: crimson;
}

.navbar-header {
}

.navbar .container-fluid {
    padding: 0px 20px 0px 20px;
}

.helpy-bar {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    border-top: 5px solid #ffc100;
    color: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16);
    border-bottom: 1px solid transparent;
    background-color: #0c99d5;
    background-image: linear-gradient(to bottom, rgba(12, 153, 213, 0) 0px, rgba(12, 153, 213, 0) 100px, #0c99d5 450px, #0c99d5), repeating-linear-gradient(118deg, rgba(12, 153, 213, 0) 0px, #00a7e0 550px, rgba(12, 153, 213, 0) 550px, #00a7e0 800px, rgba(12, 153, 213, 0) 800px, #00a7e0 950px);
    overflow: hidden;

    & img, a {
        max-height: 40px;
        width: auto;
        margin: 3px;
        margin-right: 5px;
    }
}

.grey {
    background-color: #f8f8f8;
}

.white {
    background-color: #ffffff;
}


.text-danger {
    color: rgb(212, 63, 58);
}

text-white {
    color: white;
}

.text-yellow {
    color: #ffc100;
    text-shadow: 0px 0px 3px @brand-primary;
}

.icon-home {
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
    border: 5px solid #fff;
    line-height: 1.5em;
}

.text-home {
    font-size: 3.5em;
    height: 1.7em;
}


.success {
    color: rgb(92, 184, 92);
}

.cursor-pointer {
    cursor: pointer;
}

.label-danger, .alert-danger {
    background-color: transparent;
    color: rgb(212, 63, 58);
    border-color: none;
    border-radius: 0;
    font-weight: bold;
}

.label-success, .alert-success {
    background-color: transparent;
    color: rgb(92, 184, 92);
    border-color: none;
    border-radius: 0;
    font-weight: bold;
}

.label-warning, .alert-warning {
    background-color: transparent;
    color: rgb(240, 173, 78);
    border-color: none;
    border-radius: 0;
    font-weight: bold;
}

.helpylife-poweredby {
    vertical-align: bottom;
    margin-top: 3em;
}

.dropdown-menu > li > a:hover {
    color: @brand-primary;
}

.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* In sostituzione del precedente che aveva -15px e che faceva apparire la scroll orizzontale :)*/
.row {
    margin-left: 0;
    margin-right: 0;
}


.btn {
    border: none;
}

.btn-primary {
    .button-variant(@bianco, @brand-primary, darken(@brand-primary, 10%));
}

.btn-default {
    border: @brand-primary-light 1px solid !important;
}

.btn-circle {
    border-radius: 50%;
}

.panel {
    border-radius: @panel-border-radius;
    box-shadow: none;
    //border-color: none;//@border;
    background-color: none;
}

.panel-default {
    .panel-variant(@border, @heading-text-color, @heading-bg-color, @heading-border);
    border-radius: @panel-border-radius;
    box-shadow: @brand-primary-light 0px 0px 5px;
    border: none;
    //border-color: @brand-primary;
    //background-color: none;
}


.panel-primary {
    .panel-variant(none, @heading-text-color, @heading-bg-color, @heading-border);

    .panel-heading {
        background-color: @backgroundColor;
        border-color: @border;
        border-radius: @panel-border-radius;
        background-image: none;
    }

    .panel-body {
        border-radius: @panel-border-radius;
        box-shadow: none;
        border-color: @border;
        background-color: @backgroundColor;
    }
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
}

.padding-div {
    padding: 3px !important;
}

.no-padding {
    padding: 0px !important;
}

.no-margin {
    margin: 0px !important;
}

.box {
    overflow-y: auto;
}

.bordo-evidenziato {
    min-height: 150px;
    border: 1px dashed lightskyblue;
    border-radius: 3px;
    padding-bottom: 20px;
}

.fixed-col-right {
    top: 0;
}


/* Bottoni Stato Obiettivo */
.btn-stato-nonsuperato {
    .btn-default;

    & > span {
        .text-danger;
    }
}

.btn-stato-nonsuperato-selected {
    .btn-danger;

    & > span {
        color: white;
    }
}

.btn-stato-intermedio {
    .btn-default;

    & > span {
        .text-warning;
    }
}

.btn-stato-intermedio-selected {
    .btn-warning;

    & > span {
        color: white;
    }
}

.btn-stato-superato {
    .btn-default;

    & > span {
        .text-success;
    }
}

.btn-stato-superato-selected {
    .btn-success;

    & > span {
        color: white;
    }
}

.btn-toggle {
}

.btn-toggle:hover {
    text-shadow: 0px 0px 2px @brand-primary-dark;
}

/* Table */
.table {
    & tbody tr.highlight {
        background-color: @brand-primary-light;
    }
}

/* Modal */
.modal-dialog.full-size {
    min-width: 98%;

    & .modal-content {
    }

    & .modal-content .modal-body {
        min-height: 75vh;
    }
}

.modal-dialog.full-size-width {
    min-width: 98%;

    & .modal-content {
    }
    
}