/*#region General Benchmark page style ******************************/
.qtip-light {
    width: 350px;
}

#OpenCreateModal {
    margin-bottom: 20px;
}

.generalFontSize {
    font-size: 16px !important;
}

.bIdeaInputLabel {
    margin-left: 2px;
    margin-bottom: 4px;
}

.inputAndLabel {
    margin-top: -19px;
    margin-bottom: 20px;
    margin-left: 20px;
}




/*Style for the table length menu for Jquery Datatables*/
.tableLengthSelect {
    /*margin-left: 5px;*/
    margin-right: 5px;
}

div#benchmarkTableLengthMenu {
    font-size: 14px;
    margin-bottom: -13px;
    margin-left: 4px;
}

#BenchmarkTable_filter {
    margin-top: 10px !important;
}

table.dataTable tfoot th {
    padding: 3px 3px 3px 3px;
}

p.statusHeader {
    height: 40px;
    font-size: 1.5em;
    padding: 10px 0px 0px 5px;
}

/*Allignment for Date filter button with the checkbox*/
#DateFilterAndCheckBox {
    bottom: 2px;
    left: 25px;
}

#DateFilter {
    padding-top: 2px;
    padding-bottom: 2px;
}



table.dataTable td {
    line-height: 1;
}


/*#region Styling the stat data table **********/
.collapse {
    display: none;
}

tr.collapse.in {
    display: table-row;
}

    /* Make sure that a row of the expanded stat table is not becomming unreadable when hovering*/
    tr.collapse.in:hover {
        color: #000000 !important;
    }
    /*Set background color of each td in the expanded table to light grey*/
    tr.collapse.in td {
        background: #f2f2f2 !important;
    }

    tr.collapse.in.active td {
        background: #3498db !important;
    }



.collapse-trigger.in.active td {
    background: #3498db;
}

/*Styling the table row with collapse trigger class. This will be the top row of the expanded table (the thead actually, but showed as tr)*/
.collapse-trigger.in td {
    background: #0093cf; /*Blue*/
    color: white;
    font-weight: bold;
}

.collapse-trigger.in {
    /*border-left: 2px solid #313131 !important;*/
}
/*#endregion stat data table */

.header-filter {
    display: block;
}

.dataTables_wrapper {
    margin-top: 10px;
}

/*Style for button inside table cell*/
button.btn.blueIdeaTableRowBtnEdit, button.btn.blueIdeaTableRowBtnDelete {
    font-size: 17px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    display: block;
    margin: auto;
}



label.labelForTextArea {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    margin-bottom: 8px;
    font-weight: bold;
}

/*#region Style for loading spinners *****/

/*Container div having something that needs to be loaded and the spinner to show while loading*/
div.loadingSpinnerContainer {
    position: relative;
}

    /* Children of the loadingSpinnerContainer should be positioned absolute in order for them to lay over each other */
    div.loadingSpinnerContainer .loadingSpinnerContainerChild {
        position: absolute;
        top: 0;
        left: 0;
    }

/*#endregion loading spinners*/



/*#endregion General Benchmark page style */



/*#region Style for the date picker and time picker rows ***********/
.benchmarkDateTimeRow {
    margin-bottom: 30px;
}

div.row.benchmarkInputRow {
    margin-bottom: 15px;
}



div.row#statInvolvedAddr2 {
    margin-left: 0;
}


/*Style the labels for date and time inputs*/
.dateAndTimeInputLabel {
    font-size: 16px;
    margin-left: 2px;
    margin-bottom: 6px;
    font-weight: bold;
}

.dateAndTimeInputLabelForCreateModal {
    font-size: 16px;
    margin-left: 12px;
    margin-bottom: 6px;
    font-weight: bold;
}
/*#endregion date and time pickers */

/*#region Styling overview area *************************/

/*Style for the checkbox belonging to the DateFilter button*/
#CheckBoxOnlyActive {
    margin-top: 10px;
    margin-left: 10px;
}



/*Move the benchmark table a bit up*/
#BenchmarkTable_wrapper {
    margin-top: 10px;
}

#BenchmarkTable td {
    vertical-align: middle !important;
}

div#BenchmarkOverviewColumn {
    margin-top: 20px;
    margin-bottom: 95px;
}


#BenchmarkTable {
    min-width: 880px;
    border-top: 1px solid lightgrey;
    font-size: 18px;
}

#benchmarkTableLoader {
    margin-top: -60px;
}

/*Set a small margin on the Benchmark table info text - for allignment!*/
#BenchmarkTable_info {
    margin-left: 1px;
}

/*The search button on the benchmark page is inside a span, and we need to make it float left*/
#dateFilterSpan {
    float: left;
}
/*The "show only active"-checkbox needs to have a margin left - oterwise it will display inside the search button*/
#checkOnlyActiveDiv {
    margin-left: 87px;
}

/*Style for the Benchmark overview section*/
div#BMarkOverViewContent.content-field {
    padding-bottom: 10px;
}

/*#endregion Overview area */



/*#region Styles for modal windows and their content ********************/

/*Style for modal window header*/
h2.modal-header {
    margin-bottom: 20px;
}

div.jqmWindow, .completePromptWindow {
    /*Set duration of animation*/
    -webkit-animation-duration: 0.3s; /* Chrome, Safari, Opera */
    -o-animation-duration: 0.3s; /* Chrome, Safari, Opera */
    animation-duration: 0.3s;
}

/*Remove margin for the row containing input for Project ID*/
#editProjectIdRow {
    margin-left: 0px;
    margin-top: 4%;
}

/*Width of the Project ID input*/
#editProjectIdInput {
    max-width: 217px;
}

/*Make sure the textareas on the edit modal cannot exceed the boundaries of the window!*/
.editTextArea {
    max-width: 550px;
}

#editCatAndCauseRow {
    margin-bottom: 20px;
}

button.modalBottomBtn {
    margin-right: 10px;
}

/*#region PROMPTED END DATE MODAL*/



#modalCompleteDatePromptHeader {
    font-weight: bold;
    font-size: 12pt;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6%;
}

/*Style for the modal container*/
.completePromptWindow {
    display: none;
    z-index: 100 !important;
    position: absolute;
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 22px 0px 30px 0px;
    max-width: 60%;
    left: 15%;
    bottom: 5%;
}

    .completePromptWindow div.modalButtonsRow {
        margin-top: 10%;
        padding-left: 3%;
    }

.completePromptButtonsRow {
    margin-top: 8%;
}

    .completePromptButtonsRow .col-md-12 {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 11px;
    }


#editEndTimePrompt {
    min-width: 70px;
    min-height: 36px !important;
}



/*#endregion */

#ctl00_ContentPlaceHolder1_Benchmark_CreateUserList td {
    float: left;
    width: 130px;
    overflow: hidden;
    height: 30px;
}

#editInfoportalCauseRow, #editCatAndCauseRow {
    margin-left: 0;
}

/*Style the Bootstrap multiselect button*/
button.multiselect.dropdown-toggle.btn.btn-default {
    text-align: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#editCategorySpan, #editCategorySelect {
    height: 34px;
}
/*Style for category select in modal window*/
#editCategorySelect {
    width: 217px;
}

#editCauseSpan, #editCauseSelect {
    height: 32px;
}

#editCauseSpan {
    width: 101px;
    font-weight: bold;
}

/*Change the margin of the row containing the dropdown for category - it's too much in the top
    Also change the bottom margin
*/
#editCategoryRow {
    margin-bottom: 23px;
}

/*Placement of the caret in the multiselect*/
button.multiselect.dropdown-toggle.btn.btn-default b.caret {
    float: right;
    vertical-align: middle;
    margin-top: 7px;
    margin-left: 20px;
}

/*Width of the dropdown of the multiselect*/
ul.multiselect-container.dropdown-menu {
    min-width: 200px;
}

.createModalRow {
    margin-bottom: 20px;
    margin-left: 10px;
}

div.row#smsTextAreaRow {
    margin-left: -5px;
}
/*Set min and max width of the sms text area*/
#createSmsTextArea {
    min-width: 503px;
    max-width: 650px;
    cursor: default;
}

/*make sure the input group addons have the same width - be consistent!*/
span.input-group-addon.modalInputGroupAddon {
    min-width: 100px;
}


.editInputGroupAddon {
    min-width: 85px;
    font-weight: bold;
}

span.input-group-addon.createInputGroupAddon {
    font-weight: bold;
    width: 126px;
}


textarea.form-control.createTextArea {
    width: 456px; /*So that it matches the width of the other inputs */
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

label.createTextAreaLabel {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: bold;
    border-bottom: none;
    margin-bottom: 0;
}

/*Style for the date picker rows in the create modal*/
div.row#createBMarkStartDateAndTimeRow {
    margin-left: -4px;
}

div.row#createBMarkEndDateAndTimeRow {
    margin-left: -4px;
}

/*Style the popover for the choose broadcast selector. The width will be too small otherwise */
select#chooseBroadcastSelect + div.popover {
    min-width: 110px;
}

/*Set min height of the broadcast select*/
#chooseBroadcastSelect {
    min-height: 30px;
}

#createProjectIdInput {
    max-width: 170px;
}

/*Style for the comment text area row which, for some reason, is misplaced*/
div.row#commentTextAreaRow {
    margin-left: -5px;
}

/*Set width of the category and cause select inputs */
#createSmsCategorySelect, #createCauseSelect {
    min-width: 170px;
    min-height: 30px;
}

#editProjectIdSpan {
    width: 101px;
    font-weight: bold;
    min-width: 101px;
}

#smsCategorySelectColumn span {
    min-width: 101px;
}


#ModalConfirm {
    width: 200px;
    height: 200px;
    min-height: 200px;
    left: 90%;
    top: 66%;
}

#confirmModalHeader {
    font-weight: bold;
    border: none;
    text-align: center;
}

button.btn.modalConfirmBtn {
    padding: 10px;
    width: 50px;
    border-radius: 13px;
}


div#createBottomBtnsColumn {
    margin-left: 25px !important;
}








/*#endregion Modal window*/