body {margin: 0; font-family: 'Montserrat', sans-serif;  font-size: 13pt; color:#333; line-height: 1.5;}
h1,h2,h3,h4,h5,h6 {font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}
h1 {font-size:21pt;}
h2 {font-size:18pt;}
h3 {font-size:16pt; }

.container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.wide-container {padding:30px 150px;}

/* GRID */
.row {display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px; margin:2px 0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {position: relative; min-height: 1px; padding:0 15px;}

/* TABLE */
table {width:100%;border-collapse: collapse;}
td, th {padding:10px; text-align:left;  }
th {background-color:#f7f7f7; font-weight:bold;}
tr {border-top: 1px solid #ccc;  } /*show row lines - default*/
.gridlines tr, .gridlines td { border: 1px solid #ccc; } /*show all gridlines*/


/*COLORS, BUTTONS, & INPUTS */
input,select, select[multiple], textarea { max-width: 280px; height: auto;} 
select {height: 36px !important; max-width: 305px;}
label {font-weight:bold;}

[popover] { position: fixed; inset: 0; width: 40%; height: fit-content; margin: auto;}

a { text-decoration: none !important; color: #0066ff; border: none; outline: none; }
a:active, a:focus { outline: none; }
a:hover {opacity:.7;}

.btn, .btn-block {margin: 3px 0; padding: 8px 16px; max-width: 305px; font-size: 16px; line-height: 2; border-radius: 6px; font-weight: normal; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none;  border: none; text-decoration:none; }
.btn:hover, .btn-block:hover {opacity:.9;}
.btn:active, .btn-block:active {opacity:.9;}
.btn-block{display:block; width:100%;}

.txt-block {display: block; width: 100%; height: 22px; padding: 5px 12px; font-size: 16px; line-height: 1.43; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; margin: 2px 0;}
.txt-block:focus {border-color: #66afe9;  outline: 0;}

/*COLORING*/
.bg-red {background-color:#c24846;color:#fff !important;}
.bg-blue{background-color:#31496f; color:#fff;}
.bg-green {background-color:#8fbf64; color:#fff !important; }
.bg-gray {background-color:#eee; color:#444 !important; }
.bg-azure {background-color:#209fd0;color:#fff !important; }
.txt-red {color:#c24846;}

.icon {fill: currentColor;width: 1em; height: 1em; vertical-align: middle; vertical-align: -.125em; overflow: hidden;}
.alert {padding: 20px; overflow: auto; color: #fff; background-color: #8fbf64; } 

/* ALIGNMENT */
  .sameline {display: inline-block; width: auto; vertical-align: middle;}
  .sameline label,.sameline input, .sameline input, .sameline button, .sameline select , .sameline input[type=text],.sameline input[type=radio], .sameline input[type=checkbox] {display: inline-block; margin-top: 0; margin-bottom: 0; margin-left: 0;vertical-align: middle;float: none;}

.text-center {text-align:center;}
.text-right {text-align:right;}
.float-right {float:right;} 
.float-left {float:left;}
.p20 {padding:20px;}

/* AJUST BASED ON SCREEN SIZE - KEEP THIS SECTION AT END */
@media (min-width: 768px) {.container {width: 750px;}}
@media (min-width: 992px) {.container {width: 970px;}}
@media (min-width: 1200px) {.container {width: 1170px;}}

    /* grid lg screen */
@media (min-width: 992px) {
    .col1 {grid-column: span 1;} .col2 {grid-column: span 2;} .col3 {grid-column: span 3;} .col4 {grid-column: span 4;} .col5 {grid-column: span 5;} .col6 {grid-column: span 6;} .col7 {grid-column: span 7;} .col8 {grid-column: span 8;} .col9 {grid-column: span 9;} .col10 {grid-column: span 10;} .col11 {grid-column: span 11;} .col12 {grid-column: span 12;}
    .sm-view {display: none !important;}
}

    /* grid sm screen*/
@media screen and (max-width: 991px) {
    .row {grid-gap:0px;}
    [class^="col"] {grid-column: span 12;}
    .lg-view {display: none !important;}
    .wide-container{padding:30px;}
}