/* GENERAL */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-decoration: none;
}

html {
    font-family: "Lucida Sans", sans-serif;
    /*font-family: "segoe-ui", "open-sans", tahoma, arial;*/
}
p {
    margin: 4px 8px;
}

ulNIU {
    margin: 0px; /*these dont work: margin: none; margin: 0;*/
    padding: 0; /*padding: 0 8px;*/
}
liNIU {
    list-style-type: none;
}


/* MENU */
aXX {
    font-size: 14px;
    font-weight: bold;
    /*line-height: 32px;
    display: inline-block;*/
    padding: 0.2em 0.4em 0.15em 0.4em;/*padding: 4px 8px;*/
    color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw*/
    background-color: transparent; /* #B8CCE4; 'TextboxBackColor Default Schema Blauw lichtblauw*/
    border: 1px solid #B8CCE4; /*rgba(0,0,0,0.25);*/
    float: left;
    cursor: pointer;
}
aXX:hover{
    /*background: darken($red, 1.5%);*/
    border: 1px solid rgba(0,0,0,.05);
    -webkit-box-shadow: 1px 1px 2px rgba(255,255,255,0.2);
            box-shadow: 1px 1px 2px rgba(255,255,255,0.2);
    color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    background-color: #ddd;
    /*text-shadow: -1px -1px 0 darken($red, 9.5%);*/
    -webkit-transition: all 50ms linear;
    -o-transition: all 50ms linear;
    transition: all 50ms linear;
}

/* INDEX */

.c_gridcontainer {
    display: -ms-grid;
    display: grid;

    grid-gap: 0px;
        -ms-grid-columns: 1fr 0px 1fr 0px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
            -ms-grid-rows: auto 0px auto 0px auto 0px auto;
    grid-template-areas:
            "c_header c_header c_header"
            "c_menu c_menu c_menu"
            "c_select_file c_link_columns c_Select_level"
            "c_table_stud c_table_stud c_table_stud";
}
/* ------------------- c_header ----------------------*/
.c_header {
    grid-area: c_header;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    display: grid;/*display: inline-block;*/
    /*height: 36px;*/
    width: 100%;
    padding: 8px 16px;
    /*  background-color:  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
    color: #ffffff;
}

.c_header h1 {
    font-size: 18px;
    padding: 0px 0px;/*padding: 4px 16px;*/
    margin: 0px 0px;
    color: #E3EBF4; /*HeaderForeColor Default Schema Blauw */
    /*color: #376191;  FooterBackColor Default Schema Blauw donkerblauw */
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    text-decoration: none;
}

/* ------------------- c_menu ----------------------*/
.c_menu {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    grid-area: c_menu;

    display: inline-block;

    /*height: 24px;*/
    width: 100%;
    padding: 0px; /*padding: 0 8px;*/
    margin: 0px; /*these dont work: margin: none; margin: 0;*/
    background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */ /* #4A7DBB; /* 'TextboxBackColor Default Schema Blauw medium blauw */
    color: #ffffff;
}

.c_school_name {
        float: left;
}
.c_school_year {
        float: right;
}

.c_header button {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 32px;
    margin: 0px 8px;
    /*max-width: 40px; */
    width: 40px; /*width: 100%; */
    border: 1px solid #B8CCE4; /*rgba(0,0,0,0.25);*/
    color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */
    background-color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    cursor: pointer;
    float: right;
}
.c_header button:hover{
    /*background: darken($red, 1.5%);*/
     border: 1px solid rgba(0,0,0,.05);
     -webkit-box-shadow: 1px 1px 2px rgba(255,255,255,0.2);
             box-shadow: 1px 1px 2px rgba(255,255,255,0.2);
     color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
     background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */
    /*text-shadow: -1px -1px 0 darken($red, 9.5%);*/
     -webkit-transition: all 100ms linear;
     -o-transition: all 100ms linear;
     transition: all 100ms linear;
}
/* ------------------- c_select_file ----------------------*/
.c_select_file {
/*
    grid-area: c_select_file;
        -ms-grid-row: 5;
        -ms-grid-column: 1;

    display: -ms-grid;
    display: grid;
    grid-gap: 8px;


    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
*/
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 8px;
    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
    background-color: #F5FAFF; /*licht licht blauw; */


}

/* ------------------- c_link_columns ----------------------*/

/* PR2019-01-05 try flexbox */

.ea_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /*center /* space-between;  space-around PR2019-01-05 try flexbox */
    align-items: flex-start;
    border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
/*
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 8px;

    color: #fff;
    background-color: #F5FAFF; *//*licht licht blauw; */
/*    padding: 20px;
    border: 2px solid #376191;
    width: 100%;
    */
}

.ea_flex > div {
    flex: 1;
    border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
}

.li_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* center /* space-between;  space-around PR2019-01-05 try flexbox */
    align-items: flex-start
/*
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 8px;
*/
    /*color: #fff;*/
    /*background-color: #F5FAFF; *//*licht licht blauw; */
    /*padding: 20px;*/
    /*border: 2px solid #376191;*/
    /*width: 100%;*/
}
.li_flex > div {
    flex: 1;
    border: 1px solid #800000; /* background-color: #800000; dark red*/
}



.c_link_columns {
/*
    grid-area: c_link_columns;
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
        -ms-grid-columns: 1fr 8px 1fr;
    grid-template-columns: 1fr 1fr;
        -ms-grid-rows: auto 8px auto 8px auto;
    grid-template-areas:
        "c_columns_header c_columns_header"
        "c_grid_colExcel c_grid_colAwp"
        "c_grid_colLinked c_grid_colLinked";

*/

    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 8px;

    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
    background-color: #F5FAFF; /* licht licht blauw; */

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.c_columns_header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: c_columns_header;
    font-size: 18px;
    line-height: 1.25;
    padding: 0px;

    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
}
.c_grid_colExcel {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: c_grid_colExcel;
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    color: #ffffff;
    width: 100%
}




.c_colExcelAwp_tr {
    /*background-color:    #a5c2ff; lighter blueish*/
    background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */ /* #4A7DBB; /* 'TextboxBackColor Default Schema Blauw medium blauw */
    color: #ffffff;

    color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    background-color: #d7e4f3; /*#d7e4f3 is even lighter blueish  #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */
    text-align: left;
    padding: 4px 8px;

    /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: background-color 0.25s ease;
    -o-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;

}

.c_grid_colAwp {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: c_grid_colAwp;
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    color: #ffffff;
    width: 100%
}


.c_columns_tr{
    /*background-color: #a5c2ff; /*lighter blueish*/

    color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */

    padding: 4px 8px;
        /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
}
.c_colAwpExcel_highlighted {
    background-color: #6083cc; /*blueish*/
    background-color: #a5c2ff; /*lighter blueish*/
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    color: #ffffff;
    padding: 4px 18px;
}
.c_colAwpExcel_hover {
    background-color: #7e98b5; /*lgreyish lightblue PR2019-01-05*/
    color: #ffffff;
    -webkit-box-shadow: 3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  /* Firefox 3.5 - 3.6 */
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; */
    box-shadow:         3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}


.c_grid_colLinked { /* <table class="c_grid_colLinked" id="idTableLinked"> */
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: c_grid_colLinked;
    /*background-color: #a21313; /*reddish*/
    background-color: #800000; /*dark red*/
    color: #ffffff;
    width: 100%
}

.c_colLinked_tr {
    background-color: #bd7f7f; /*lighter reddish*/
    text-align: left;
    padding: 4px 18px;
    /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;

}

.c_colLinked_highlighted {
    background-color: #a21313; /*reddish*/
}

.c_colLinked_hover {

    background-color: #a75050;  /* geryis red PR2019-01-05
    /* background-color: #a21313; *//*reddish   Needed for IEs */

    -webkit-box-shadow: 3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  /* Firefox 3.5 - 3.6 */
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; */
    box-shadow:         3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

/* ------------------- c_Select_level ----------------------*/
.c_Select_level {
    grid-area: c_Select_level;
        -ms-grid-row: 5;
        -ms-grid-column: 5;

    display: -ms-grid;
    display: grid;
    grid-gap: 8px;

    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    padding: 4px 8px;
    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
    background-color: #F5FAFF; /*licht licht blauw; */

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.c_form_text {
    font-size: 14px;
    margin: 8px;
    /*color: #E3EBF4; /*HeaderForeColor Default Schema Blauw */
    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
}

.c_form_select {
    font-size: 14px;
    margin: 8px;
    width: 96px;
    /*color: #E3EBF4; /*HeaderForeColor Default Schema Blauw */
    color: #376191;  /*FooterBackColor Default Schema Blauw donkerblauw */
}


/* ==================TABLE ==================================== */
.c_table_stud {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: c_table_stud;
    /*margin: 16px;*/
    font-size: 12px;
    padding: 1em;
    /*line-height: 1.25; */
    /*background-color: #F5FAFF /* licht licht blauw; /*#B8CCE4 = 'TextboxBackColor Default Schema Blauw lichtblauw */
}

/* Table Header */
.c_table_stud thead  {
    background-color: #508abb;

    background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */ /* #4A7DBB; /* 'TextboxBackColor Default Schema Blauw medium blauw */
    color: #ffffff;/*color: #FFFFFF; white */


    color: #E3EBF4; /*HeaderForeColor Default Schema Blauw */
    /*color: #376191;  FooterBackColor Default Schema Blauw donkerblauw */
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */

        border-color: #6ea1cc !important;
        /*text-transform: uppercase;*/
        border: 1px solid #e1edff;
        padding: 7px 17px;
}
.c_table_stud thead td {
        padding: 2px 4px;
}
.c_table_stud_thead_td_selected {
        /*background-color: #a21313; /*reddish*/
        background-color: #800000; /*dark red*/
}

/* Table Body */
.c_table_stud tbody td {
        color: #353535;/* donker grijs RGB(53,53,53)) */
        /*border: 1px solid #e1edff;*/
        padding: 2px 4px;
}

/* Table Footer */
.c_table_stud tfoot th {
        background-color: #376191;  /* RGB(55,97,145) FooterBackColor Default Schema Blauw medium blauw  */
        text-align: left;
}


.c_footer {
    font-size: 12px;
     /* grid-area: grid-footer;*/
    text-align: center;
    padding: 2px 8px;
    color: #ffffff;
    background-color: #2D4E77; /* AWP donkerblauw */
}

@media only screen and (max-width: 480px) {/* 768px) {*/
    /* For mobile phones: */

    [class="c_gridcontainer"] {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
            grid-template-areas:
            "c_header"
            "c_menu"
            "c_select_file"
            "c_link_columns"
            "c_Select_level"
            "c_table_stud";
        }

    [class="c_gridcontainer"] > .c_header {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        }

    [class="c_gridcontainer"] > .c_menu {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        }

    [class="c_gridcontainer"] > .c_select_file {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        }

    [class="c_gridcontainer"] > .c_link_columns {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        }

    [class="c_gridcontainer"] > .c_Select_level {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        }

    [class="c_gridcontainer"] > .c_table_stud {
        -ms-grid-row: 6;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        }
    }


/* SEARCH */
.search_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /*center /* space-between;  space-around PR2019-01-05 try flexbox */
    align-items: flex-start;

    /*height: 24px;*/
    /*width: 100%;*/
    padding: 4px 8px;
    margin: 0px; /*these dont work: margin: none; margin: 0;*/
    /*background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */ /* #4A7DBB; /* 'TextboxBackColor Default Schema Blauw medium blauw */

    background-color: #F5FAFF; /* licht licht blauw; */
    color: #376191;  /* Default Schema Blauw donkerblauw */
    border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
}

.search_container_header {
    display: inline-block;
    /*height: 36px;*/
    width: 100%;
    margin: 0px;
    padding: 0px 8px;
    /*  background-color:  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
    /* color: #376191;  /* Default Schema Blauw donkerblauw */
    /* border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
}


.search_table_div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
/*    overflow-y: auto;    /* Trigger vertical scroll    */
/*    overflow-x: hidden;  /* Hide the horizontal scroll */
/*    border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
}

.search_table {
    display: table;
    padding: 4px 8px;
    /*margin: 4px 8px;*/
    border: 1px solid ;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */

    /*background-color: #800000; /*dark red*/
    /*background-color: #a21313; /*reddish*/
    /*background-color: #d7e4f3;/* is even lighter blueish */
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    color: #376191;  /* Default Schema Blauw donkerblauw */

    /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.search_table > thead {
    display: block;
   /* background-color: #800000; /*dark red*/
    color: #ffffff;
    padding: 2px 8px;
    border: 1px solid #2D4E77;    /*  #2D4E77; HeaderBackColor Default Schema Blauw donkerblauw */
    width: 100%

}
.search_table > tbody {
    display: block;
    /*height: 120px;* set at runtime  */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
    /*background-color: #d7e4f3; /*#d7e4f3 is even lighter blueish  #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */
    /*background-color: #800000; /*dark red*/

}

.search_table_tr {
    display: block;
    background-color: #d7e4f3; /*#d7e4f3 is even lighter blueish  #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */
    background-color: #2d4e7705;


    margin-right: auto;
    margin-left: auto;
        /*border: #7e98b5 1px solid;*/
}
/*.search_table_td {*/
.search_table_tr > td {
   /*display:block;*/
   box-sizing:border-box;
   padding: 0px 8px;
}

.search_table_hover {
    background-color: #7e98b5; /*lgreyish lightblue PR2019-01-05*/
    background-color: #2d4e7780;

    color: #ffffff;
    -webkit-box-shadow: 3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  /* Firefox 3.5 - 3.6 */
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; */
    box-shadow:         3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.search_table_highlighted {
    background-color:  #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    background-color:  #2d4e77cc;
    color: #ffffff;
}





/* ============   popup window  =================== */


.mod_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /*center /* space-between;  space-around PR2019-01-05 try flexbox */
    align-items: flex-start;
    border: none;
}
/* > means: select elements that are direct descendants only. */
.mod_flex > div {
    flex: 1;
    padding: 4px 16px;
    border: none;
}

.display_show {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.display_hide {
  display: none;
}

.display_block {
  display: block;
}



/*
.cell_error tr:nth-child(even) td {
        background-color: #f4fbff; /* RGB(244,251,255) heel licht blauw */
        /*background-color: #F5FAFF; /* RGB 245, 250, 255 #F5FAFF = licht licht blauw; #B8CCE4 = 'TextboxBackColor Default Schema Blauw lichtblauw */
    /*background: #ffcccc
        /*background-color: rgba(0, 169, 230, 0.1)*/
/*}*/



.tr_hover .tr_hover_yellow {
    color: #000000;
    -moz-box-shadow: 3px 3px 5px 6px rgba(68, 68, 68, 0.6);
    -webkit-box-shadow: 3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */  /* Firefox 3.5 - 3.6 */
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; */
    box-shadow:         3px 3px 5px 6px rgba(68, 68, 68, 0.6);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.tr_hover {
   background-color: #e0e0e0 !important; /* licht grijs; tsa_tr_selected*/
}
.tr_hover_yellow {
   background: #fbedba !important; /* tsa_bc_yellow_light lighter shade of tsa yellow */
}

.tr_highlighted {
    /* background-color:   #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    /* background:  #2d4e77cc;*/
    background-color: #808080 ;
    color: #ffffff;
    font-weight: bold;
        -moz-transition: background 0.25s ease-in-out;
        -webkit-transition: background 0.25s ease-in-out;
               -o-transition: background 0.25s ease-in-out;
               transition: background 0.25s ease-in-out;
}

.tsa_bc_lightlightgrey {
    /*background: #f8f8f8; /*licht licht licht grijs 248 248 248 */
    /*background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    background-color: #f5f5f5; /* #f5f5f5 = 245 245 245  licht licht licht grijs; */
}

.tsa_btn_selected  {
    background-color: #fbedba; /* lighter shade of tsa yellow */
    /*background-color: #B8CCE4; /* 'TextboxBackColor Default Schema Blauw lichtblauw */ /* #4A7DBB; /* 'TextboxBackColor Default Schema Blauw medium blauw */
    color: #303024; /* dark dark Panta Rhei grey 48 48 36 */
}
.tsa_tr_selected {
    background: #e0e0e0; /* light grey; tsa_tr_selected*/
}

.tsa_tr_error {
   /* background: #f1b5b5; /* licht rood; */
    background: #ffe8e8; /* licht lichtrood; */
}
.tsa_tr_ok {
    background: #d7f4de; /* licht groen; */
}
.cell_unchanged_odd {
    /*background: #e0e0e0;  /* light grey */
    /*background: #fafafa;  /* light light grey */
    background: #f2f5f8;  /* light light bluish grey */

}
.cell_unchanged_even {
    /* background: #f8f8f8;  /* light light grey */
    /* background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    /*background-color: #f5f5f5;  /* #f5f5f5 licht licht licht grijs 245 245 245;  this is reddish: background-color: #f8f8f8;*/
    background: #ffffff;  /* white */
}



/* PR2019-04-06 from https://css-tricks.com/fixing-tables-long-strings/ */
.tsa_tbl  {
    /*table-layout: auto;*/
    table-layout: fixed;
    width: 100%; /* must have this set instead of 'auto'*/
    /* try: */
    /* word-break: break-all; */
    word-break: break-word;
    display: block;
    overflow: auto;
    /* PR2020-06-17 see https://stackoverflow.com/questions/41421512/why-does-flex-box-work-with-a-div-but-not-a-table */
    /* TEST
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    border-collapse: collapse;
    */
}

.tsa_tbl th  {
    padding: 0.2rem 0.25rem 0.05rem 0.25rem;
    margin: 0;
    /*background: #f8f8f8; /*licht licht licht grijs 248 248 248 100%; */
    /*background: #e8e8e880; /*licht licht grijs 232 232 232 50% */
    background-color: #f5f5f5; /* this is reddish: background-color: #f8f8f8;*/
    white-space: normal;
    overflow-wrap: break-word; /* TODO not working*/
    word-wrap: break-word;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
}

.tsa_tbl tr {
    padding: 0.2rem 0.25rem 0.05rem 0.25rem;
    margin: 0;
}

.tsa_tbl td {
    /* display: table-cell; /* PR2020-05-28 problems with right align offset field in datatable om planning page */
    /*width: 100%;*/
    padding: 0.2rem 0.25rem 0.05rem 0.25rem;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;/* from bootstrap table td */
    border-top: 1px solid #dee2e6; /* from bootstrap table td */
}

.label_margin_top_m3 {
    margin: 16px 8px 4px 8px; /* mx-2 = .5 rem, mx-1 = .25 rem, 1 rem = 16 px  <top><right><bottom><left> */
}
.label_margin_top_m2 {
    margin: 8px 8px 4px 8px; /* <top><right><bottom><left> */
    /*  m-1 = .25 rem 4px; m-2 = .2 rem 8px; m-3 = 1 rem 16px; m-4 = 1.5 rem 24px; m-5 = 3 rem 48px; 1 rem = 16 px  */
}
.label_margin_top_m1 {
    margin: 4px 8px 4px 8px; /* <top><right><bottom><left> */
    /*  m-1 = .25 rem 4px; m-2 = .2 rem 8px; m-3 = 1 rem 16px; m-4 = 1.5 rem 24px; m-5 = 3 rem 48px; 1 rem = 16 px  */
}
.awp_margin_top_48 {
    /* margin: <top><right><bottom><left> */
   margin-top: 48px
}
.tsa_margin_top_72 {
    /* margin: <top><right><bottom><left> */
   margin-top: 72px
}
.tsa_margin_top128_left224 {
    /* margin: <top><right><bottom><left> */
   margin-top: 128px;
   margin-left: 224px;
}


.tw_100perc { width: 100%; }

.tw_720 { width: 720px; }
.tw_600 { width: 600px; }
.tw_480 { width: 480px; }
.tw_420 { width: 420px; }
.tw_390 { width: 390px; }
.tw_360 { width: 360px; }
.tw_320 { width: 320px; }
.tw_300 { width: 300px; }
.tw_280 { width: 280px; }
.tw_240 { width: 240px; }
.tw_220 { width: 220px; }
.tw_200 { width: 200px; }
.tw_180 { width: 180px; }
.tw_150 { width: 150px; }
.tw_120 { width: 120px; }
.tw_110 { width: 110px; }
.tw_100 { width: 100px; }
.tw_090 { width: 90px; }
.tw_080 { width: 80px; }
.tw_075 { width: 75px; }
.tw_060 { width: 60px; }
.tw_032 { width: 32px; }
.tw_020 { width: 20px; }
.tw_016 { width: 16px; }

.ta_l {text-align: left;}
.ta_c {text-align: center;}
.ta_r {text-align: right;}

.line_height_normal {
    line-height: normal;
}
.line_height_1 {
    line-height: 1;
}

.font_weight_normal { /* PR2025-07-24only used in page exams th_filter column examperiod */
    font-weight: normal;
}
.tbl_h180 {
    overflow-y: auto;
    height: 180px;
}
.tbl_h320 {
    overflow-y: auto;
    height: 320px;
}
.tbl_w200 {
    overflow-x: hidden;
    width: 200px;
}
.tbl_w280 {
    overflow-x: hidden;
    width: 280px;
}
.tbl_w360 {
    overflow-x: hidden;
    width: 360px;
}
.tbl_w420 {
    overflow-x: hidden;
    width: 420px;
}
.tbl_w745 {
    overflow-x: hidden;
    width: 745px;
}
.tbl_studsubj_h_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    width: auto
}
.tbl_studsubj_h390_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: auto
}
.tbl_mailbox_h390_w_320 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 320px
}
.tbl_h320_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 320px;
    width: auto
}
.tbl_h240_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 240px;
    width: auto
}

.tbl_h180_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 180px;
    width: auto
}
.tbl_partex_h220_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 220px;
    width: auto
}
.tbl_partex_h280_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 280px;
    width: auto
}
.tbl_mailbox_h240_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 240px;
    width: auto
}
.tbl_mailbox_cc_h120_w_auto {
    overflow-x: hidden;
    overflow-y: auto;
    height: 120px;
    width: auto
}

.tbl_h180_w360 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 180px;
    width: 360px;
}

.tbl_MUA_h390_w280 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 280px;
}
.tbl_MMLA_h390_w420 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 420px;
}
.tbl_MMLselect_h390_w365 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 365px;
}

.tbl_h140_w240 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 140px;
    width: 240px;
    padding: 4px;
}

.tbl_h128_w220 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 128px;
    width: 220px;
    padding: 4px;
}

.tbl_h120_w220 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 120px;
    width: 220px;
    padding: 4px;
}
.tbl_hide_scrollbar {
    overflow-x: hidden;
    overflow-y: auto;
}

.input_text, .tsa_transparent {
    background: transparent;
    border: none;
    margin: 0;
	padding: 0 8px;
/* PR2020-12-18 debug. Input element exceeds width of parent td.
    Solved by add width: 100%, adding  box-sizing: border-box not necessary, already set by default
    from https://stackoverflow.com/questions/1633522/html-input-element-wider-than-containing-div */
    width: 100%;
}

.display_hide {
  display: none;
}

.visibility_hide {
  visibility: hidden;
}

.test_color {
   background-color: #fbd8ec !important; /* #fbd8ec; pinkish  */
}
.pointer_show {
    cursor: pointer;
    /* to prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.image_container {
  display: flex;
  justify-content: center;
  padding: 4px;
}

/* PR2021-07-23 center image. From https://www.w3.org/Style/Examples/007/center.en.html */
.icon_24 {
    display: block;
    margin: 8px auto;
    width: 24px;
    height: 24px;
}
.icon_18 {
    width: 18px;
    height: 18px;
}



.nopadding {
    padding-top: 0.05rem;;
    padding-bottom: 0.05rem;
}

.border_none {
    border: 0;
    /*background-color: transparent;*/
}
.border_left {
    border-left: 1px solid #a5a5a5; /* medium grey; 165 165 165 */
}

.border_bottom_2px {
    border-bottom: 2px solid #a5a5a5 !important; /* medium grey; 165 165 165 */
}

.color_invalid {
    color: #dc3545;    /*  red like in django is-invalid */
}
.color_orange {
    color: orange;
}

.border_bg_invalid {
    border: 1px solid #dc3545;    /*  red like in django is-invalid */
    border-radius: .25rem;
    /*background-color: #f1b5b5;*/
    background: #ffe8e8; /* licht lichtrood; */
}

.border_invalid {
    border: 1px solid #dc3545;    /*  red like in django is-invalid */
    border-radius: .25rem;
}

.border_bg_valid {
    border: 1px solid  #4cbd67 !important;  /*  #28a745; is green like in django is-valid */
    border-radius: .25rem  !important;
    background-color: #d7f4de !important; /*#ade8bb;*/
}

.border_bg_warning {
    border: 1px solid  #ffc107 !important;  /*  #ffc107 orangeish */
    border-radius: .25rem  !important;
    background-color: #fff3cd !important; /* #fff3cd; alert-warning background  */
    /*background-color: #fdd6ba !important; /* light organgeishbackground  */
}

.border_bg_white {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: white;
}

.border_bg_transparent {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: transparent;
}
.border_bg_message {
    border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border-radius: .25rem;
    background-color: #f5f5f5;  /* licht licht licht grijs 245 245 245 */

}
.border_bg_lightblue {
    /* border: 1px solid #303024; /* dark dark Panta Rhei grey 48 48 36 */
    border: 1px solid #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    border-radius: .25rem;
    /*background-color: #2d4e77;  /* HeaderBackColor Default Schema Blauw donkerblauw RGB 45,78,119 */
   /* background-color: #376191;  /*  FooterBackColor Default Schema Blauw medium blauw  RGB 55,97,145)  */
    background-color: #b8cce4;  /* AWP lichtblauw RGB 184,204,228  */

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;

}
.bg_lightblue {
    background-color: #b8cce4;  /* AWP lichtblauw RGB 184,204,228  */

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;

}
.bg_selected_blue {
    background-color: #376191;  /*  FooterBackColor Default Schema Blauw medium blauw  RGB 55,97,145)  */
    color: #ffffff; /* #ffffff is white; #edf2f8; is light light blue*/

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;
}

.bg_medium_blue {
    color: #ffffff; /*!important;*/
    /*background-color: #2D4E77; /* HeaderBackColor Default Schema Blauw donkerblauw */
    background-color: #4c74a7; /* #4c74a7 rgba: 76-116-167-1 medium blue*/

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;
}
.bg_message {
    background-color: #f5f5f5;  /* licht licht licht grijs 245 245 245 */

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;
}
.bg_transparent {
    background-color: transparent;

    transition: background-color 250ms ease;
     -webkit-transition: background-color 250ms ease;
     -o-transition: background-color 250ms ease;
     -moz-transition: background-color 250ms ease;
}

.text_decoration_line_through_red {
  text-decoration: line-through double red;  /* #dc3545;    /*  red like in django is-invalid */
}

/* to reset text-decoration after marking tobedeleted row with line-through red */
.text_decoration_initial {
  text-decoration: initial;
}

/* PR2023-03-24 to set hove on select element. see https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover*/
option:hover {
  background-color: #e0e0e0; /* light grey; tsa_tr_selected*/
  /*background-color: #f2f2f2;  /* light light grey 242 242 242 100%
}

.msg_bullet {
    margin-bottom: 0px;
    padding-left: 16px;
}

.msg_bullet li {
    list-style: inside;
    list-style-type: disc;
    /*padding-left: 2rem;*/
}

.awp_tr_disabled {
    background-color: #f5f5f5;  /* licht licht licht grijs 245 245 245 */
    /*color: #808080 !important;  /* dark grey 128 128 128 */
    color: #a5a5a5 /* !important;  /* medium grey; 165 165 165 */
}


.tbl_div_390_220 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 220px;
}
.tbl_div_390_320 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 320px;
}
.tbl_div_520_360 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 520px;
    width: 360px;
}
.tbl_div_390_420 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 390px;
    width: 420px;
}
.tbl_div_450_480 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 450px;
    width: 480px;
}

.tbl_div_520_200 {
    overflow-x: hidden;
    overflow-y: auto;
    height: 520px;
    width: 200px;
}

/* freeze table header */
#id_tbl_container {
    float: left;
    overflow: auto;
    height: 75%;
    border-spacing: 0 !important;
    border-collapse: separate !important;
}
/* from https://stackoverflow.com/questions/45692744/td-border-disappears-when-applying-transform-translate */


/* SPRITES PR2020-08-17 */

.appr_0_0, .appr_0_1, .appr_0_2, .appr_0_3, .appr_0_4, .appr_0_5, .appr_0_6,
.appr_1_0, .appr_1_1, .appr_1_2, .appr_1_3, .appr_1_4, .appr_1_5, .appr_1_6,
.appr_2_0, .appr_2_1, .appr_2_2, .appr_2_3, .appr_2_4, .appr_2_5, .appr_2_6,

.stat_0_0, .stat_0_1, .stat_0_2, .stat_0_3, .stat_0_4, .stat_0_5, .stat_0_6,
.stat_1_0, .stat_1_1, .stat_1_2, .stat_1_3, .stat_1_4, .stat_1_5, .stat_1_6,

.inactive_0_0, .inactive_0_1, .inactive_0_2, .inactive_0_3,
.inactive_1_0, .inactive_1_1, .inactive_1_2, .inactive_1_3,

.note_0_0, .note_0_1, .note_0_2, .note_0_3, .note_0_4, .note_0_5, .note_0_6, .note_0_7, .note_0_8,
.note_1_0, .note_1_1, .note_1_2, .note_1_3, .note_1_4, .note_1_5, .note_1_6, .note_1_7, .note_1_8,
.note_2_0, .note_2_1, .note_2_2, .note_2_3, .note_2_4, .note_2_5, .note_2_6,  .note_2_7, .note_2_8,

.diamond_0_0, .diamond_0_1, .diamond_0_2, .diamond_0_3, .diamond_0_4,
.diamond_1_0, .diamond_1_1, .diamond_1_2, .diamond_1_3, .diamond_1_4,
.diamond_2_0, .diamond_2_1, .diamond_2_2, .diamond_2_3, .diamond_2_4,
.diamond_3_0, .diamond_3_1, .diamond_3_2, .diamond_3_3, .diamond_3_4,

.blocked_0_0, .blocked_0_1, .blocked_0_2, .blocked_0_3, .blocked_0_4,
.blocked_1_0, .blocked_1_1, .blocked_1_2, .blocked_1_3, .blocked_1_4,
.blocked_2_0, .blocked_2_1, .blocked_2_2, .blocked_2_3, .blocked_2_4,
.blocked_3_0, .blocked_3_1, .blocked_3_2, .blocked_3_3, .blocked_3_4,

.xmark_0_0, .xmark_0_1, .xmark_0_2, .xmark_0_3,
.exclamation_0_0, .exclamation_0_1, .exclamation_0_2,

.tickmark_0_0, .tickmark_0_1, .tickmark_0_2,
.tickmark_1_0, .tickmark_1_1, .tickmark_1_2,
.tickmark_2_0, .tickmark_2_1, .tickmark_2_2,

/*.questionmark,*/

.mail_0_0, .mail_0_1, .mail_0_2,

.delete_0_0, .delete_0_1, .delete_0_2 {
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    margin: auto;
    padding-top: 2px;
}
.appr_0_0, .appr_0_1, .appr_0_2, .appr_0_3, .appr_0_4, .appr_0_5, .appr_0_6,
.appr_1_0, .appr_1_1, .appr_1_2, .appr_1_3, .appr_1_4, .appr_1_5, .appr_1_6,
.appr_2_0, .appr_2_1, .appr_2_2, .appr_2_3, .appr_2_4, .appr_2_5, .appr_2_6 {
    background-image: url('/static/img/appr210314.png');
    background-size: 140px 60px;
}
.appr_0_0 { background-position: -0px -0px;}
.appr_0_1 { background-position: -20px -0px;}
.appr_0_2 { background-position: -40px -0px;}
.appr_0_3 { background-position: -60px -0px;}
.appr_0_4 { background-position: -80px -0px;}
.appr_0_5 { background-position: -100px -0px;}
.appr_0_6 { background-position: -120px -0px;}
.appr_1_0 { background-position: -0px -20px;}
.appr_1_1 { background-position: -20px -20px;}
.appr_1_2 { background-position: -40px -20px;}
.appr_1_3 { background-position: -60px -20px;}
.appr_1_4 { background-position: -80px -20px;}
.appr_1_5 { background-position: -100px -20px;}
.appr_1_6 { background-position: -120px -20px;}
.appr_2_0 { background-position: -0px -40px;}
.appr_2_1 { background-position: -20px -40px;}
.appr_2_2 { background-position: -40px -40px;}
.appr_2_3 { background-position: -60px -40px;}
.appr_2_4 { background-position: -80px -40px;}
.appr_2_5 { background-position: -100px -40px;}
.appr_2_6 { background-position: -120px -40px;}

.stat_0_0, .stat_0_1, .stat_0_2, .stat_0_3, .stat_0_4, .stat_0_5, .stat_0_6,
.stat_1_0, .stat_1_1, .stat_1_2, .stat_1_3, .stat_1_4, .stat_1_5, .stat_1_6 {
    background-image: url('/static/img/status.png');
    background-size: 140px 40px;
}
.stat_0_0 { background-position: -0px -0px;}
.stat_0_1 { background-position: -20px -0px;}
.stat_0_2 { background-position: -40px -0px;}
.stat_0_3 { background-position: -60px -0px;}
.stat_0_4 { background-position: -80px -0px;}
.stat_0_5 { background-position: -100px -0px;}
.stat_0_6 { background-position: -120px -0px;}
.stat_1_0 { background-position: -0px -20px;}
.stat_1_1 { background-position: -20px -20px;}
.stat_1_2 { background-position: -40px -20px;}
.stat_1_3 { background-position: -60px -20px;}
.stat_1_4 { background-position: -80px -20px;}
.stat_1_5 { background-position: -100px -20px;}
.stat_1_6 { background-position: -120px -20px;}

.inactive_0_0, .inactive_0_1, .inactive_0_2, .inactive_0_3,
.inactive_1_0, .inactive_1_1, .inactive_1_2, .inactive_1_3 {
    background-image: url('/static/img/inactive.png');
    background-size: 80px 40px;
}
.inactive_0_0 { background-position: -0px -0px;}
.inactive_0_1 { background-position: -20px -0px;}
.inactive_0_2 { background-position: -40px -0px;}
.inactive_0_3 { background-position: -60px -0px;}
.inactive_1_0 { background-position: -0px -20px;}
.inactive_1_1 { background-position: -20px -20px;}
.inactive_1_2 { background-position: -40px -20px;}
.inactive_1_3 { background-position: -60px -20px;}

.note_0_0, .note_0_1, .note_0_2, .note_0_3, .note_0_4, .note_0_5, .note_0_6, .note_0_7, .note_0_8,
.note_1_0, .note_1_1, .note_1_2, .note_1_3, .note_1_4, .note_1_5, .note_1_6, .note_1_7, .note_1_8,
.note_2_0, .note_2_1, .note_2_2, .note_2_3, .note_2_4, .note_2_5, .note_2_6,  .note_2_7, .note_2_8 {
    background-image: url('/static/img/notes230403.png');
    background-size: 180px 60px;
}
.note_0_0 { background-position: -0px -0px;}
.note_0_1 { background-position: -20px -0px;}
.note_0_2 { background-position: -40px -0px;}
.note_0_3 { background-position: -60px -0px;}
.note_0_4 { background-position: -80px -0px;}
.note_0_5 { background-position: -100px -0px;}
.note_0_6 { background-position: -120px -0px;}
.note_0_7 { background-position: -140px -0px;}
.note_0_8 { background-position: -160px -0px;}
.note_1_0 { background-position: -0px -20px;}
.note_1_1 { background-position: -20px -20px;}
.note_1_2 { background-position: -40px -20px;}
.note_1_3 { background-position: -60px -20px;}
.note_1_4 { background-position: -80px -20px;}
.note_1_5 { background-position: -100px -20px;}
.note_1_6 { background-position: -120px -20px;}
.note_1_7 { background-position: -140px -20px;}
.note_1_8 { background-position: -160px -20px;}
.note_2_0 { background-position: -0px -40px;}
.note_2_1 { background-position: -20px -40px;}
.note_2_2 { background-position: -40px -40px;}
.note_2_3 { background-position: -60px -40px;}
.note_2_4 { background-position: -80px -40px;}
.note_2_5 { background-position: -100px -40px;}
.note_2_6 { background-position: -120px -40px;}
.note_2_7 { background-position: -140px -40px;}
.note_2_8 { background-position: -160px -40px;}


.diamond_0_0, .diamond_0_1, .diamond_0_2, .diamond_0_3, .diamond_0_4,
.diamond_1_0, .diamond_1_1, .diamond_1_2, .diamond_1_3, .diamond_1_4,
.diamond_2_0, .diamond_2_1, .diamond_2_2, .diamond_2_3, .diamond_2_4,
.diamond_3_0, .diamond_3_1, .diamond_3_2, .diamond_3_3, .diamond_3_4 {
    background-image: url('/static/img/diamond211218.png');
    background-size: 100px 80px;
}

.blocked_0_0, .blocked_0_1, .blocked_0_2, .blocked_0_3, .blocked_0_4,
.blocked_1_0, .blocked_1_1, .blocked_1_2, .blocked_1_3, .blocked_1_4,
.blocked_2_0, .blocked_2_1, .blocked_2_2, .blocked_2_3, .blocked_2_4,
.blocked_3_0, .blocked_3_1, .blocked_3_2, .blocked_3_3, .blocked_3_4 {
    background-image: url('/static/img/blocked220417.png');
    background-size: 100px 80px;
}

.diamond_0_0, .blocked_0_0 { background-position: -0px -0px;}
.diamond_0_1, .blocked_0_1 { background-position: -20px -0px;}
.diamond_0_2, .blocked_0_2 { background-position: -40px -0px;}
.diamond_0_3, .blocked_0_3 { background-position: -60px -0px;}
.diamond_0_4, .blocked_0_4 { background-position: -80px -0px;}

.diamond_1_0, .blocked_1_0 { background-position: -0px -20px;}
.diamond_1_1, .blocked_1_1 { background-position: -20px -20px;}
.diamond_1_2, .blocked_1_2 { background-position: -40px -20px;}
.diamond_1_3, .blocked_1_3 { background-position: -60px -20px;}
.diamond_1_4, .blocked_1_4 { background-position: -80px -20px;}

.diamond_2_0, .blocked_2_0 { background-position: -0px -40px;}
.diamond_2_1, .blocked_2_1 { background-position: -20px -40px;}
.diamond_2_2, .blocked_2_2 { background-position: -40px -40px;}
.diamond_2_3, .blocked_2_3 { background-position: -60px -40px;}
.diamond_2_4, .blocked_2_4 { background-position: -80px -40px;}

.diamond_3_0, .blocked_3_0 { background-position: -0px -60px;}
.diamond_3_1, .blocked_3_1 { background-position: -20px -60px;}
.diamond_3_2, .blocked_3_2 { background-position: -40px -60px;}
.diamond_3_3, .blocked_3_3 { background-position: -60px -60px;}
.diamond_3_4, .blocked_3_4 { background-position: -80px -60px;}

.exclamation_0_0, .exclamation_0_1, .exclamation_0_2 {
    background-image: url('/static/img/exclamation.png');
    background-size: 60px 20px;
}
.exclamation_0_0 { background-position: -0px -0px;}
.exclamation_0_1 { background-position: -20px -0px;}
.exclamation_0_2 { background-position: -40px -0px;}

.tickmark_0_0, .tickmark_0_1, .tickmark_0_2,
.tickmark_1_0, .tickmark_1_1, .tickmark_1_2,
.tickmark_2_0, .tickmark_2_1, .tickmark_2_2 {
    background-image: url('/static/img/tickmark210315.png');
    background-size: 60px 60px;
}
.tickmark_0_0 { background-position: -0px -0px;}
.tickmark_0_1 { background-position: -20px -0px;}
.tickmark_0_2 { background-position: -40px -0px;}
.tickmark_1_0 { background-position: -0px -20px;}
.tickmark_1_1 { background-position: -20px -20px;}
.tickmark_1_2 { background-position: -40px -20px;}
.tickmark_2_0 { background-position: -0px -40px;}
.tickmark_2_1 { background-position: -20px -40px;}
.tickmark_2_2 { background-position: -40px -40px;}

.delete_0_0, .delete_0_1, .delete_0_2 {
    background-image: url('/static/img/btn_del221024.png');
    background-size: 60px 20px;
}
.delete_0_0 { background-position: -0px -0px;}
.delete_0_1 { background-position: -20px -0px;}
.delete_0_2 { background-position: -40px -0px;}

.btn_del_0_1, .btn_del_0_2 {
    background-image: url('/static/img/btn_del221024.png');
    background-size: 84px 28px;
    background-repeat: no-repeat;

    border: 1px solid #808080;  /* #2d2400 = 45 36 0 Panta Rhei grijs;*/  /* #808080; /* dark grey 128 128 128 */
    border-radius: .1rem;
    box-shadow: 2px 2px #808080;

    height: 28px;
    width: 28px;
    margin: 0;
    padding-top: 0px;
}
.btn_del_0_1 { background-position: -28px -0px;}
.btn_del_0_2 { background-position: -56px -0px;}

.flag_0_0, .flag_0_1, .flag_0_2,
.flag_1_0, .flag_1_1, .flag_1_2 {
    background-image: url('/static/img/flags.png');
    background-size: 108px 48px;
    background-repeat: no-repeat;
    height: 24px;
    width: 36px;
    margin: 8px 4px 8px 4px;
    cursor: pointer;
}
.flag_0_0 { background-position: -0px -0px;}
.flag_0_1 { background-position: -36px -0px;}
.flag_0_2 { background-position: -72px -0px;}
.flag_1_0 { background-position: -0px -24px;}
.flag_1_1 { background-position: -36px -24px;}
.flag_1_2 { background-position: -72px -24px;}

.questionmark {
    background-image: url('/static/img/questionmark.png');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    margin: 4px 4px 4px 4px;
    cursor: pointer;
}

.historyicon {
    background-image: url('/static/img/history240725.png');
    background-size: 20px 20px;
    background-position: -0px -0px;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    /*margin: 4px 4px 4px 4px;*/
    margin: auto;
    padding-top: 2px;
    cursor: pointer;
}


.etelogo {
    background-image: url('/static/img/etelogo.png');
    background-size: 32px 32px;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    margin: 4px 4px 4px 4px;
    cursor: pointer;
}
.envelope_0_0, .envelope_0_1, .envelope_0_2 {
    background-image: url('/static/img/envelope211027.png');
    background-size: 96px 32px;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    margin: 4px 4px 4px 4px;
    cursor: pointer;
}
.envelope_0_0 { background-position: -0px -0px;}
.envelope_0_1 { background-position: -32px -0px;}
.envelope_0_2 { background-position: -64px -0px;}

/* class mail_0 is used in table: as envelope, but smaller */
.mail_0_0, .mail_0_1, .mail_0_2 {
    background-image: url('/static/img/envelope211027.png');
    background-size: 60px 20px;
    background-repeat: no-repeat;
}
.mail_0_0 { background-position: -0px -0px;}
.mail_0_1 { background-position: -20px -0px;}
.mail_0_2 { background-position: -40px -0px;}


.awplogo {
    background-image: url('/static/img/awplogo.png');
    background-size: 36px 24px;
    background-repeat: no-repeat;
    height: 24px;
    width: 36px;
    margin: 8px 4px;
    cursor: pointer;
    background-position: -0px -0px;
}

/* END OF SPRITES */