/*
-----------------------------------------------
Author:   www.studioveldkamp.nl
Site:     Innova Reports
Version:  2022-05-12
----------------------------------------------- */

/* the default classes are overwritten by adding a custom class */

/* 
Branding colors
- blurple > rgba(42,45,136,1)
- pure orange > rgba(226,83,3,1)
- baby blue = rgba(88,201,235,1)
- cyan = rgba(0,157,224,1)
- light green = rgba(60,191,27,1)

Table Lines / Lines / UI 
- light purple/blue > #D0D7E5

Text
- dark (titles) > #0f2741
- light (body) > #455f7c
- softer text color > #444 > the 444 is used in news pop-up & menu items. Keep using #030303 or #000 for headers

Background color
- light > #f5f8fb
- border > #d9d9d9;

Links
- hover > rgba(226,83,3,1);

*/

/* default flex classes */
.f { display: flex; }
.fc { display: flex; flex-direction: column; }
.fr { display: flex; flex-direction: row; }
.fas { align-self: flex-start; }
.fac { align-self: center; }
.fae { align-self: flex-end; }
.fjs { justify-content: flex-start; }
.fjc { justify-content: center; }
.fje { justify-content: flex-end; }
.fg { flex-grow: 1; }
.fb_9 { flex-basis: 9%; }
.fb_10 { flex-basis: 10%; }
.fb_20 { flex-basis: 20%; }
.fb_23 { flex-basis: 23%; }
.fb_25 { flex-basis: 25%; }
.fb_30 { flex-basis: 30%; }
.fb_33 { flex-basis: 33%; }
.fb_40 { flex-basis: 40%; }
.fb_50 { flex-basis: 50%; }
.fb_60 { flex-basis: 60%; }
.fb_66 { flex-basis: 66%; }
.fb_70 { flex-basis: 70%; }
.fb_75 { flex-basis: 75%; }
.fb_77 { flex-basis: 77%; }
.fb_80 { flex-basis: 80%; }
.fb_90 { flex-basis: 90%; }

/* standard paddings / margins */
.pl_10 { padding-left: 10px; }
.pl_15 { padding-left: 15px; }
.pr_10 { padding-right: 10px; }
.pr_15 { padding-right: 15px; }
.ml_5 { margin-left: 5px; }
.ml_10 { margin-left: 10px; }
.ml_15 { margin-left: 15px; }
.mr_5 { margin-right: 5px; }
.mr_7 { margin-right: 7px; }
.mr_10 { margin-right: 10px; }
.mr_15 { margin-right: 15px; }
.mt_10 { margin-top: 10px; }
.mt_5 { margin-top: 5px; }
.mb_15 { margin-bottom: 15px; }
.mb_30 { margin-bottom: 30px; }

/* standard widths - usually set in custom styles */
.full_width { width: 100%; }
.default_fixed_width { width: 1550px; }

/* default grid classes */
.g { display: grid; }
.grid_1 { grid-template-columns: repeat(1, 100%); }
.grid_2 { grid-template-columns: repeat(2, 50%); }
.grid_3 { grid-template-columns: repeat(3, 33%); }
.grid_4 { grid-template-columns: repeat(4, 25%); }
.grid_5 { grid-template-columns: repeat(5, 20%); }
.grid_6 { grid-template-columns: repeat(6, 16.5%); }
.grid_7 { grid-template-columns: repeat(7, 14.28%); }
.grid_8 { grid-template-columns: repeat(8, 12.5%); }

/* pointer events, positioning */
.npe { pointer-events: none; }
.no_pointer_events { pointer-events: none; }
.pos_rel { position: relative; }
.pos_abs { position: absolute; }
.db { display: block; }

/* default color classes */
.orange_fill { fill: rgba(226,83,3,1) !important; } 
.orange { color: rgba(226,83,3,1) !important; } 
.orange_fill_t { 
    fill: rgba(226,83,3,1) !important; 
    transition: 0.3s ease-in-out;
} 
.orange_t { 
    color: rgba(226,83,3,1) !important; 
    transition: 0.3s ease-in-out;
} 

/* default button classes */
.default_btn {
    background-color: rgba(226,83,3,1);
    border: 1px solid rgba(226,83,3,1);
    padding: 5px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    align-self: center;
    text-align:center;
}

.default_btn:hover {
    opacity: 0.8;
    cursor: pointer;
 }

.grey_btn {
    color: #0f2741;
    background-color: #f5f8fb;
    border: 1px #f5f8fb solid;
}

.grey_btn_outline {
    border: 1px #D0D7E5 solid;
}

.ui_button {
    font-family: Roboto;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    padding: 5px 8px;
    border-radius: 4px;
    color: #455f7c;
    border: 1px solid #D0D7E5;
    transition: 0.3s ease-in-out;
    width: fit-content;
}

.ui_button_active {
    color: #0f2741;
    background-color: #f5f8fb;
    border: 1px solid #0f2741;
}

.ui_button:hover  {
    color: #0f2741;
    border: 1px solid #0f2741;
    text-decoration: none !important;
    cursor: pointer;
  }

/* default text classes */
h3 {
    font-size: 18px;
    font-family: "Roboto";
    font-weight: 700;
    margin: 0px;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
  }

/* default input field classes */
.basic_input_field {
    border-radius: 4px;
    border: 1px solid #D0D7E5;
    width: 100%;
    font-size: 12px;
    font-family: 'Roboto';
    font-weight: 400;
    padding: 0px;
    padding-left: 8px;
    height: 24px;
    color: #455f7c;
    transition: ease-in-out 0.3s;
}

.basic_input_field:focus {
    border: 1px solid #0f2741;
    outline: none;
    transition: ease-in-out 0.3s;
}

.basic_input_field::placeholder {
    color: #455f7c;
}

.basic_text_area {
    border-radius: 4px;
    border: 1px solid #D0D7E5;
    font-size: 12px;
    font-family: 'Roboto';
    font-weight: 400;
    padding: 10px;
    color: #455f7c !important;
    outline: none;
}

.basic_text_area::placeholder {
    color: #455f7c !important;
}

.basic_select_field {
    border-radius: 4px;
    border: 1px solid #D0D7E5;
    font-size: 12px;
    font-family: 'Roboto';
    font-weight: 400;
    padding-left: 5px;
    padding-right: 5px;
    color: #455f7c !important;
    height: 24px;
    outline: none;
}

/* default checkbox classes */
.ea_checkbox {
    cursor: pointer;
    line-height: 0;
}

.ea_checkbox_label {
    cursor: pointer;
    font-size: 12px;
    font-family: Roboto;
    color: #455f7c;
    line-height: 12px;
}

.ea_checkbox_label:hover {
    color: #0f2741;
}

/* some spacers */
.spacer_h_15 { height: 15px; }
.spacer_h_20 { height: 20px; }
.sp_column_spacer2 { width: 15px; }
.sp_column_spacer_popup { width: 15px; }
.sp_column_spacer4 { width: 30px; }
.row_spacer { height: 30px; }

/* margins */
.ml_5 { margin-left: 5px; }
.ml_10 { margin-left: 10px; }
.ml_15 { margin-left: 15px; }
.ml_20 { margin-left: 20px; }
.ml_25 { margin-left: 25px; }
.mr_5 { margin-right: 5px; }
.mr_10 { margin-right: 10px; }
.mr_15 { margin-right: 15px; }
.mr_20 { margin-right: 20px; }
.mr_25 { margin-right: 25px; }
.mt_5 { margin-top: 5px; }
.mt_10 { margin-top: 10px; }
.mt_15 { margin-top: 15px; }
.mt_20 { margin-top: 20px; }
.mt_25 { margin-top: 25px; }
.mb_5 { margin-bottom: 5px; }
.mb_10 { margin-bottom: 10px; }
.mb_15 { margin-bottom: 15px; }
.mb_20 { margin-bottom: 20px; }
.mb_25 { margin-bottom: 25px; }

/* paddings */
.pl_5 { padding-left: 5px; }
.pl_10 { padding-left: 10px; }
.pl_15 { padding-left: 15px; }
.pl_20 { padding-left: 20px; }
.pl_25 { padding-left: 25px; }
.pr_5 { padding-right: 5px; }
.pr_10 { padding-right: 10px; }
.pr_15 { padding-right: 15px; }
.pr_20 { padding-right: 20px; }
.pr_25 { padding-right: 25px; }

/* widths */
.width_100_pc { width: 100%; }
.width_50 { width: 50px; }
.width_75 { width: 75px; }
.width_100 { width: 100px; }
.width_125 { width: 125px; }
.width_150 { width: 150px; }
.width_175 { width: 175px; }
.width_200 { width: 200px; }
.width_250 { width: 250px; }
.width_300 { width: 300px; }
.width_350 { width: 350px; }
.width_400 { width: 400px; }
.width_450 { width: 450px; }
.width_500 { width: 500px; }