/*Content on page should have automargin to left and right and have fixed width on 962 px (it looks best!)*/
.autoMarginAnd100PWidth {
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100%; /*Using fixed width for content makes it easier with allignment! (as the page is not set up with Bootstrap from the very beginning)*/
    -webkit-transition: width 1s ease;
    -o-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    transition: width 0.5s ease;
}

/*Style for button inside table cell. Button used to delete the row in the table*/
button.btn.blueIdeaTableDeleteBtn {
    display: block;
    margin: auto;
}

div.dateTimeInputDiv {
    margin-top: -18px;
}

input.form-control.inputForDateAndTime {
    height: 30px;
}

/*Style for div fields that should have a grey-light background*/
div.description-field {
    background: #eee url(../../../../../App_Themes/BlueIdeaTheme/css/images/description-field-bg.gif) repeat-x !important;
    padding: 10px 20px 15px 20px;
    margin-bottom: 8px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

div.content-field {
    background: #f6f6f6;
    padding: 20px 20px 40px 20px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.blueIdeaTimepicker {
    max-width: 90px;
}

i.glyphicon-time {
    font-size: 20px;
    margin-top: 3px;
}

/*Style for inputs where there's an error'*/
.errorInput {
    box-shadow: 0 0 5px rgba(255, 0, 0, 1);
}

/*Style for the date picker calendar popup*/
th.picker__weekday {
    padding-left: 20px;
    font-weight: bold;
    color: black;
}

/*Style for removeing the ugly outline when clicking a button*/
.btn:focus, .btn:active {
    outline: none !important;
}

/*Style for default btn*/
button.btn.btn-default {
    background: lightgrey;
    padding: 5px;
}

/*Style for Danger button*/
button.btn.blueIdeaTableRowBtnDelete {
    padding: 5px;
}



/*Add margin to the left for trash icons on delete buttons*/
i.fa.fa-trash-o {
    margin-left: 5px;
}


/*Remove checkbox outline
    Got this from: https://github.com/flatlogic/awesome-bootstrap-checkbox/issues/32
*/
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0px !important;
    -webkit-appearance: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/*There's a bit too much top margin for the paginate buttons - make it smaller'*/
div.dataTables_paginate {
    margin-top: -1px;
}

.BIdeaDropDown {
    margin-top: -1px;
    max-height: 29px;
}

/*Styling select inputs so they're not to high*/
select.form-control, div.form-control {
    height: 28px;
    padding: 0 4px;
}

/*Styling for input groups containing selet elements. They are for some reason being added a left margin - away with that*/
div.row.RowWithSelectInputGroup {
    margin-left: 0;
}

/*Styling the span addon for a text area. This is instead of adding the input-group-addon class to the span*/
span.SpanAddonForTextArea {
    padding: 6px 32px 6px 32px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    min-width: 100px;
}

/*Style for a text area having a span element right before it*/
textarea.form-control.TextAreaWithSpanBefore {
    margin-top: -9px;
    margin-left: -15px;
    border-top-left-radius: 0;
}


/********************* Styling for qtip **********************/
div.qtip {
    max-width: 500px;
}

/*Set background color of Qtip titlebar*/
div.qtip-titlebar {
    background-color: #2ba5d7 !important;
}

/*Set color of the title text in Qtip*/
div.qtip-title {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: -10px !important;
}

div.qtip-bootstrap {
    padding: 0;
}

div.qtip-content {
    padding: 0 !important;
}

/*Style for the text inside a qtip. This is a custom class and not made by qtip. It's just used on a wrapper div fr the text content so that we can add padding to it */
div.qtip-text {
    padding: 5px;
}

/**************************************************************/



input.form-control:not([placeholder="tt:mm"]) {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/*Style the bottom footer of the whole page so that we get the rounded corners like elsewhere*/
div#contact {
    border-radius: 4px;
}

/*Style for popovers - hide the title!*/
.popover-title {
    display: none;
}


/*Style for status headers*/
p.greenStatusHeader {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cbc0a+0,9dd53a+100,a1d54f+100,9dd53a+100,9dd53a+100 */
    background: #7cbc0a; /* Old browsers */
    background: -moz-linear-gradient(left, #7cbc0a 0%, #9dd53a 100%, #a1d54f 100%, #9dd53a 100%, #9dd53a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #7cbc0a 0%,#9dd53a 100%,#a1d54f 100%,#9dd53a 100%,#9dd53a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #7cbc0a 0%,#9dd53a 100%,#a1d54f 100%,#9dd53a 100%,#9dd53a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cbc0a', endColorstr='#9dd53a',GradientType=1 ); /* IE6-9 */
    color: black;
}

p.redStatusHeader {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f02f17+20,e73827+75 */
    background: #f02f17; /* Old browsers */
    background: -moz-linear-gradient(left, #f02f17 20%, #e73827 75%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #f02f17 20%,#e73827 75%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #f02f17 20%,#e73827 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f02f17', endColorstr='#e73827',GradientType=1 ); /* IE6-9 */
    color: white;
}


/*#region STYLE FOR CAUSE DROPDOWN (created using the function CreateDropDownWithAddBtn from the file DropDownWithAddBtn)*/

/*#region STYLING THE CONTAINER FOR BENCHMARK CAUSE DROPDOWN*/


    div.causeSelectColumn.input-group > div > span.input-group-addon {
        width: 101px !important;
        font-weight: bold !important;
        min-height: 30px !important;
        float: left !important;
    }

.causeDdContainer {
    float: left !important;
    width: calc(100% - 101px) !important;
    min-height: 30px !important;
}


/*#region Special case for the editCauseDropdown as it needs another height */

#editCauseSelectColumn span.input-group-addon {
    padding-top: 9px;
}

#editCauseSelectColumn span.input-group-addon, #editCauseSelectColumn div.bIdeaCauseDropdown {
    height: 34px;
}

    #editCauseSelectColumn div.bIdeaCauseDropdown > button.btn {
        padding-top: 4px;
    }

        #editCauseSelectColumn div.bIdeaCauseDropdown > button.btn > span.caret {
            margin-top: 10px;
        }



/*#endregion */

/*#endregion*/

.bIdeaCauseDropdown {
    min-height: 30px;
    padding: 0 !important;
}

    .bIdeaCauseDropdown > button.btn {
        background: transparent;
        border: none;
        position: absolute;
        padding: 2px 5px 2px 5px;
        text-align: left;
        width: 100%;
        overflow-x: hidden;
    }

        .bIdeaCauseDropdown > button.btn:active {
            box-shadow: none !important;
        }

        .bIdeaCauseDropdown > button.btn > span {
            margin-left: 5px;
            vertical-align: middle;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .bIdeaCauseDropdown > button.btn > .ddToggleText {
            width: 90%;
            overflow-x: hidden;
            float: left;
            margin-top: 4px;
        }

div.bIdeaCauseDropdown > .dropdown-menu {
    padding-bottom: 0 !important;
    min-width: 250px; /*So there's enough space to also show a delete button (when necessary)*/
}

    div.bIdeaCauseDropdown > .dropdown-menu > li:not(.addNewCauseBtn) {
        padding-left: 7px;
        min-height: 20px; /*IMPORTANT - otherwise the floating elements (inside the li) will make the height 0 and make it all look strange*/
    }
   

    div.bIdeaCauseDropdown > .dropdown-menu> li.addNewCauseBtn {
        text-align: center;
        padding: 4px 7px;
    }

       div.bIdeaCauseDropdown > .dropdown-menu > li.addNewCauseBtn > i {
            color: #0093cf;
        }

    div.bIdeaCauseDropdown > .dropdown-menu> li:hover, li.deleteable:hover {
        background: #0093cf;
        color: white;
    }

   div.bIdeaCauseDropdown > .dropdown-menu > li.addNewCauseBtn:hover > i {
        color: white;
    }

   div.bIdeaCauseDropdown > .dropdown-menu> li:hover {
       cursor: pointer;
    }  
   
   div.bIdeaCauseDropdown > .dropdown-menu> li > div {
    overflow-x: hidden;
    float: left;
    }

    i.fa.fa-trash {
        opacity: 0.5;
        color: red;
        z-index: 1000;
        margin-right: 10px;
        float: right;
    }
    i.fa.fa-trash:hover {
        opacity: 1;
        cursor: pointer;
    }
  

/*#endregion*/