/* include the music notation fonts */
@font-face {
    font-family: 'musiqwikregular';
    src: url('_includes/fonts/musiqwik-webfont.woff2') format('woff2'),
    url('_includes/fonts/musiqwik-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: "musictheory-musictype";
    src: url('_includes/fonts/musictype-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

.notes {
    font-family: 'musiqwikregular';
    /*font-family: 'musictheory-musictype';     not much here - just a couple symbols like sharp and flat */
    font-size: 36px;
}

/* Position hack since MusiQuik does not have enough ledger lines either up or down */
.down-one-note {
    position: relative;
    top: 7.26px;
}

.up-one-note {
    position: relative;
    top: -7.26px;
}

.down-two-notes {
    position: relative;
    top: 14.52px;
}

.up-two-notes {
    position: relative;
    top: -14.52px;
}

label {
    font-style: italic;
    font-weight: 200;
    color: dimgray;
    margin-top: 7px;
    padding-left: 20px;

}

table.my-form td {
    padding-left: 10px;
    vertical-align: top;
}

/* The valid chords by scale display */
table.chords td {
    padding-left: 14px;
    padding-right: 14px;
    outline-color: black;
    outline-style: solid;
    outline-width: 1px;
}


/* The Neck class includes a function to build out the display geometry from the instrument definition file
 So css (at least in this web version) is specific to a particular neck/instrument combination.
INCLUDE THIS IN THE BASE TEMPLATE {{ $form['neck_css'] }}
*/


/* Special CSS to clean up the Musical Note Symbol display */
span.flat_symbol {
    position: relative;
    top: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

span.sharp_symbol {
    position: relative;
    top: -3px;
}

.instrument_container {
    /*background-color: lightcyan;  for trouble shooting size and locations */
    height: 200px;
    width: 100%;
    /*margin-top: -240px; */
    overflow: auto;
}

img.instrument_image {
    width: 240%;
    height: 240%;
}

/* primary grid class */
/* setup the font size type and style for the note display */
table.grid {
    border-collapse: collapse; /* Remove the default padding between cells. */
    position: relative;
    /*
    margin-top: -48.5%;
    margin-left: 52%;
    margin-right: -48%;
    margin-bottom: -51.5%;
    */
    font-size: x-small;
    font-family: arial, helvetica, sans-serif;
}

/* Primary grid td main attributes */
table.grid td {
    padding: 0;
    margin: 0;
    text-align: center;

    /*
    border: solid;
    border-width: 1px;
    padding-left: 2px;
    padding-right: 2px;

     */
}

/******************************************************************************************/
/* Bootstrap override sections */
/******************************************************************************************/

/* This is set around line 423
label {
    width: 200px;
    float: left;
}
 */

label.label-short {
    width: 80px;
    float: left;
}

input.input-short.form-control {
    width: 200px;
}

/* Used to draw a separator line across the page - usually applied to a <p> tag */
.spacer-line {
    clear: both;
    margin-top: 6px;    /* You need a <label> tag if you have a blank right column; Otherwise the this 3px is not required. */
    margin-bottom: 6px;
    border-bottom: solid 1px;
    color: lightgrey;
}



/******************************************************************************************/
/* Global page messages */
/******************************************************************************************/
/* Global system banner on the top of every page (directly under nav header) by default.
    Can be turned of with System::setPage_banner_show().
*/
hr {
    margin-top: 2px;
    margin-bottom: 2px;
}

#system-page-banner {

    z-index: 99; /* Used with position: to bring to the font - on top of the jumbotron */
    position: relative;
    align-content: center;
    text-align: center;
    font-size: medium;
    font-weight: bold;
    color: darkslateblue;
    border-top: solid lightgrey 1px;
    border-bottom: solid lightgrey 1px;
    background-color: rgba(255, 255, 255, 0.6);

}

/* Standard page name display at the top of every page; usually from Tbl_Pages.
    Can be turned of with System::setPage_name_show().
 */
#system-page-name {
    /*background: lightcoral;*/
}

#system-page-name > h1 {
    font-weight: lighter;
    /*background: lightcoral;*/
}

/* Standard page descriptive heading displayed under the page name for every page; usually from Tbl_Pages.
    Can be turned of with System::setPage_heading_show().
 */
#system-page-heading {
    margin-top: -12px; /* Page name is an H1 so overcoming some of that padding. */
    margin-bottom: 4px;
}

#system-page-heading > span {
    padding-left: 12px; /* Give a little indent on the left side for the page heading. */
    color: darkgray;
    font-style: italic;
    font-weight: lighter;
}

/* LinkBar with links to other pages in this modules group.
    Displays directly under the Page Heading area and must be set by the controller.
    Build it with into  System::setPage_linkbar()
    Turn on/off with    System::setPage_linkbar_show()
*/
#system-page-linkbar {
    /*margin-top: -16px;*/
    /*background: yellow;*/
}

/* Optional CRUD heading provided bv the specific page controller.
    Displays directly under the LinkBar area and must be set by the controller.
    Set with            System::setPage_crud_heading()
    Turn on/off with    System::setPage_crud_heading_show()
 */
#system-page-dynamic-heading {
    /*margin-top: -20px;*/
    /*background: red;*/
    color: gray;
    font-size: larger;
    font-weight: bold;
}

#system-page-dynamic-heading a { /* When applying links to page headers, remove the indication of a link. */
    color: inherit;
}

#system-page-dynamic-heading a:hover {
    text-decoration: none;
}


/* Standard system flash message.
    Displays below all other messages - right before main page content or form.
*/
#system-page-flash-message {
    /*margin-top: -16px;*/
    /*background: orange;*/
    color: red;
    margin-bottom: 5px;
}

/* Base template provides an area to display all of the crud buttons for this form.
    - NOTE: not using this area since moving to Laravel

#system-page-buttons {
}

#system-page-buttons .button-group {
    padding-bottom: 6px;        /* Give a little extra cushion between the top row of buttons and the data.
}
#system-page-buttons > .btn {
    margin-right: 4px;
}
/* Changed to responsive columns in the base template.
#system-page-buttons > label {
    /*margin-right: -12px;        /* Line the buttons up with the first column of data.
}
*/
/* Set the spacing between the top/bottom of the buttons and the <hr> */
.button-group {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Set a space between the buttons. */
.button-group > .btn {
    margin-right: 4px;
}

#system-page-option-block {
    margin-left: -10px;
    width: min-content;
    float: left;
}

#system-page-attention-message {
    /* CHECK IN THE base.blade template first and see which Bootstrap classes are being applied there. */
    padding-right: 2px; /* needed to square off (to looks) this message are with the rest of the header; left and right. */
    padding-left: 4px;

}

#system-page-attention-message h4 {
    /* CHECK IN THE base.blade template first and see which Bootstrap classes are being applied there. */
    border-radius: 4px; /* added so it matched the other rounded corners in the header area. */
}


/* Default img corner radius for images in the option block. */
#system-page-option-block img {
    border-radius: 12px;
}



/******************************************************************************************/
/* Form display and controls styling */
/******************************************************************************************/
/* Note: .form-crud is a specific class to refer to a standard CRUD form.
    Without that, most of these settings would impact things like the login form, icon alignment
    and other labels and form-groups.
    */
/* Whole form positioning. */
form.form-crud {
    padding-bottom: 20px; /* Control the space between the bottom of the form and the footer (or other content). */
}

/* To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control {
    width: 240px;
    font-size: smaller;
}

/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-wide {
    width: 800px;
}

/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-medium {
    width: 400px;
}

/* Wider <input> - To ensure a consistent layout - make all the form-control <inputs> the same width. */
form.form-crud .form-control.input-narrow {
    width: 100px;
}

/* Except for text inputs. */
form.form-crud .form-control.form-textarea {

    width: 73%; /* This seems to work best for the most general use of the textarea. */
    /*width: 184%;                      /* Moved this to the Contacts detail template. Needed when inside of an md-9 */
    /* Weird; so the 184% is for a

    <div class="row collapse multi-collapse1">

    <div class="row">
    <div class="col-md">
    <div class="form-group d-inline">
        <textarea> in here
    </div>
    </div>
    </div>

    </div>

 */

    margin-left: 130px; /* Make this the same size as the <label> width + 10 */
    margin-top: 0;      /* Then we can move the <textarea> back up next to the label if we want. */
    margin-bottom: 5px; /* Same spacing to next control as all other controls. */

    /*height: 60px;                 /* Set the initial height of the <textarea> (about 2 rows of text). */
    /*height: 100%;*/ /* 100% makes it too big when selecting rows less than 4. (?) */
    padding-bottom: 14px; /* Bottom margin for the text inside the text area */

}


/* Radio buttons still use a form-control for layout purposes.
    So turn off the outline until there's some kind of error.
*/
form.form-crud div.form-control.form-radio { /* form-radio is set in the Form class */
    border-color: transparent;
}


/* The .fielderror class is set in the Form class from the backside data validation check.
    Note: the second selector is needed in order to specifically override the transparent border radio button control above.
*/
form.form-crud .form-control.fielderror, form.form-crud div.form-control.form-radio.fielderror {
    border: 2px solid red;
}

form.form-crud label.fielderror {
    color: red;
}


/* Clean up the standard Bootstrap form-group spacing. */
form.form-crud div.form-group {
    /*padding-top: 2px;             /* Add a little space between form fields.
    padding-bottom: 2px;*/
    margin-top: 0; /* tighten up the default space between form fields. */
    margin-bottom: 0;
    height: 38px; /* Needed to ensure consistency with all control types for rows tp line up. */
}

/* Use to create a row spacer between form elements. */
form.form-crud div.row.form-space {
    height: 38px;
}

/* Setup all CRUD form <label> styling here. */
form.form-crud label, form.form-crud .form-inline label {
    float: left;
    font-size: small;
    /* Looks like the .form-inline class is changing this back to left justified. */
    text-align: right !important; /* This one does work but can be overridden by certain html form control markup. */

    /*justify-content: right !important; /* This one actually changed the text alignment ONCE - then the next day it broke again!! */
    /*color: #666;*/

    /*color: gray;*/
    /*color: #4C4C4C;     /* a little darker than just plain grey. */
    color: #5F5F5F;

    font-weight: 300;
    font-style: italic;
    width: 120px;
    /* Need to force a standard label width; Without this nothing lines up.
                         Note that if you change this you must change the <textarea> left margin. */
    margin-right: 10px; /* Space between the left of the input control and the label. */
    margin-top: 8px; /* Center the label vertically on the input control. */
    /*margin-left: 8px;*/
}

/* Use a label class on to get the same affect as a form label on some other element. */
.label {
    font-size: small;
    /* Looks like the .form-inline class is changing this back to left justified. */
    text-align: right !important; /* This one does work but can be overridden by certain html form control markup. */
    color: gray;
    font-weight: 300;
    font-style: italic;
    margin-right: 10px; /* Space between the left of the input control and the label. */
    margin-top: 8px; /* Center the label vertically on the input control. */
}

/* Used only on the radio buttons to create a clickable text area around the text.
    Basically this needs to reset anything done by the form.form-crud label above.
*/
div.form-control.form-radio div.form-check.form-check-inline label.radio-empty {
    display: inline-flex;
    margin-top: 4px; /* Centering label across from the radio button. */
    margin-bottom: 4px;
    padding: 0;
    width: auto; /* Reset the width so it's not the same as the <input>. */
}


/* Don't limit the size of a radio button to the same size as an <input> */
div.form-control.form-radio {
    /*margin-top: 3px;      /* Line the buttons up with the label. BUT THIS CHANGES THE HORIZONTAL ALIGNMENT. */
    width: auto; /* Reset the width so it's not the same as the <input>. */
    /*border: none;         /* You can use this to kill the border around the radio buttons. (use on the per page css) */
}

/* And then this is the actual text display by each radio button choice. */
.radio-text {
    margin-top: -3px; /* Line the radio button choice up with the actual radio buttons. */
    margin-left: -6px; /* Need to bring the span back to encompass the radio button. */
    padding-left: 8px; /* Then give the text inside the space some breathing room between the choice and the button. */
    padding-right: 4px; /* And extend the clickable area past the text a little bit. */
    font-style: normal; /* Reset the settings made of all other form labels. */
    font-weight: normal;
    color: black;
}

/* Used to emphasize certain explanation text on a form */
.form-em {
    font-size: small; /* Same as labels */
    font-weight: 400; /* Heavier than labels */
    font-style: italic;
    color: darkgreen;
    padding: 0;
    margin: 0;
    /*margin-top: 8px        /* Umm -- this is fine it wraps;  Get this to line up with a label so we can use it as informational data next to a label. */
    /*font-size: 90%;        /* Causes wrapping too soon -- before full width. */
}

form.form-crud label.form-required {
    font-weight: bold;
}

/* lighten up the text inside any disabled <input>, <textarea> fields */
form.form-crud input[readonly], form.form-crud textarea[readonly] {
    color: darkgray;
    /*color: lightslategray;*/
}


/* Styling for any placeholder text. */
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    /* ncolor: lightblue; */
    color: #cbcbcb;
}

.form-control::-moz-placeholder { /* Firefox 19+ */
    color: #cbcbcb;
}

.form-control:-ms-input-placeholder { /* IE 10+ */
    color: #cbcbcb;
}

.form-control:-moz-placeholder { /* Firefox 18- */
    color: #cbcbcb;
}






/******************************************************************************************/
/* The security level separator heading on forms.
       Sections off form into areas - like private data only, etc.
/******************************************************************************************/
p.form-header-security, p.form-header-information {
    width: 100%;
    margin-left: 20px; /* Looks a little better if it's not dead against the form's bounding box. */
    margin-right: 20px;
    margin-top: 12px; /* Need this tight when collapsable -- but breathing room for regular form headers. */
    margin-bottom: 12px;
    font-weight: bold;
    font-style: normal;
    border-bottom: solid 1px;
}

.clear-me {
    clear: both;
}

/* Change the color of the form's information header after setting its other attributes above. */
p.form-header-information {
    color: darkgray;
}

/* Change the color of the form's information header after setting its other attributes above. */
p.form-header-security {
    color: darkred;
}

/* If you use collapse on the form-header-security, then you can style it here. */
p.form-header-security a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

p.form-header-security a:before {
    content: "+";
    margin-right: 4px;
}

/* p.form-header-security a:hover {  Can't get just the a:hover to target without going directly to the class name. */
p.form-header-security:hover {

    color: forestgreen;
!important;
}






/******************************************************************************************/
/* Datatables overrides */
/******************************************************************************************/
/* div#datatable_wrapper {      When you have more than one per page this becomes a problem. */
div[id^="datatable"][id$="_wrapper"].dataTables_wrapper { /* Note: this will match id=datatables-activity, etc. */

    margin-top: 12px; /* Give just a little breathing room between datatable and the page header area. */
    font-size: small;
}

/* Links inside of a Datatables row. (Regular text in the cell defaults to black.) */
/* REMEMBER: To use the class="dt-active" on the <a> tag. */
table[id^="datatable"] a, [class^="sorting"] a, a.dt-active {
    color: darkblue;
}

/* Items that are either archived or not active. */
/* Note: including the table#datatable id tag to ensure that we are styling all links too. */
table[id^="datatable"] td.dt-inactive, table[id^="datatable"] td.dt-inactive a, .dt-inactive {
    color: darkgray;
}

/* td.inactive[class^="sorting"] a */
td.dt-inactive.sorting_1 a, td.dt-inactive a {
    color: darkgray;
}

/* Incomplete calls in the Activity List. */
/* We're not consistently targeting the sorting_1 (something is overwriting it) so did that in jquery in the page. */
td.dt-incomplete.sorting_1, td.dt-incomplete {
    background: yellow;
}

/* Deferred calls in the Activity List. */
/* We're not consistently targeting the sorting_1 (something is overwriting it) so did that in jquery in the page. */
td.dt-deferred.sorting_1, td.dt-deferred {
    background: lightgreen;
}

/******************************************************************************************/
/* Datatables: Override the default search box styling and add a glow on focus. */
/******************************************************************************************/
div[id^="datatable"][id$="_filter"].dataTables_filter {
    margin-top: -37px;   /* For some reason, need this to get the buttons to line up with the search bar (maybe because of the label wrap?)*/
    margin-bottom: 0;    /* Distance between the Search box and the header row of the table. */
    margin-right: 0;     /* Some weird interaction with something else. Having to futz with this to get the search to land right. */
}


div[id^="datatable"][id$="_filter"].dataTables_filter input {
    /*div#datatable_filter.dataTables_filter input { */
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 2px 1px 3px 6px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
}

div[id^="datatable"][id$="_filter"].dataTables_filter input:focus {
    /*div#datatable_filter.dataTables_filter input:focus { */
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 2px 1px 3px 6px;
    border: 1px solid rgba(81, 203, 238, 1);
}

div[id^="datatable"][id$="_filter"].dataTables_filter label {
    /*div#datatable_filter.dataTables_filter label { */
    display: inline; /* Needed to get the label to show on the left side of the search input -- at least when in a tab. */
    color: gray;
    font-style: italic;
}