html, body {
    margin:0;
    padding:0;
    font-size:12px;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #515151;
}


.appt_table_header_flexrow {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 365px;
}



.appt_table_header_flank {
    width: 33%;
    max-width: 500px;
    height: 100%;
    overflow: auto;
    margin: 0px 8px;
    padding: 0px 8px;
}


.note_holder {
    margin-bottom: 16px;
}
.note_itself {
    width: 100%;
    border: 1px solid #aeaeae;
    border-radius: 4px;
    padding: 0px 6px;
    background-color: #eee;
}

.note_meta {
    padding-top: 4px;
    text-align: right;
}




.radio_text {
    display: inline-block;
    margin-left: 12px;
}

.radio_bar {
    height: 24px;
    cursor: pointer;
}



#pdf_nodes {
    position: static !important;
    z-index: -1;
    height: 0%;
    overflow: hidden;
}



.pdf_table {
    font-size: 12px;
    border-collapse: collapse;
    margin: 0 auto;
    margin-top: 8px;
    overflow: hidden;
}

.pdf_table th {
    text-align: left;
}

.pdf_table_container {
    height: 100%;
    overflow: auto;
    margin-top: 16px;
    border-top: 1px solid #ccc;
}
.pdf_table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.pdf_table tbody td:not(:last-child) {
    border-right: 1px solid #bbb;
}

.pdf_table thead tr {
    border-bottom: 1px solid black;
}
.pdf_table tbody tr {
    border-bottom: 1px solid #888;
}
.pdf_table tbody td {
}

.pdf_table td,th {
    padding: 6px
}

.flatpickr-day {
    border-radius: 4px !important;
    border: 1px solid #bbb !important;
    margin: 2px !important;
    padding: 0px !important;
}




*, *:before, *:after {
  box-sizing: inherit;
}


.ass_holder {
    width: fit-content;
    padding: 16px;
}

.ass_container {
    padding: 12px 0px;
}
.ass_item {
    padding: 4px 0px;
    display:flex;
    justify-content: space-between;
    align: center;
}

#header_edit_pop {
    border: 1px solid black; 
    position: absolute; 
    top: 28px; 
    right: 0px; 
    background-color: white; 
    font-size: 12px;
    white-space: nowrap;
    z-index: 3;
}

.header_edit_item {
    text-align: left;
    margin: 6px;
}


.table_title {
    font-size:16px;
    font-weight: bold;
    padding-right: 20px;
}

.table_title_button {
    margin-right: 20px;
}

#table_header {
    margin-top: 16px;
    display: flex;
  justify-content: space-between; /* Align items to the ends */
  align-items: center; /* Optional: Vertically align items (e.g., in the center) */
    width: 100%;
    height: 32px;
    /*background-color: #3366cc;*/
    color: black;
}

.table_header_item {
    display: inline-block; 
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
}


.paginate_num_button {
    padding: 8px 12px;
    margin: 0px 12px;
    border-radius: 6px;
}

.paginate_selected {
    background-color: #5596e6;
    color: white;
}

.paginate_input {
    height: 32px;
    padding: 8px 12px;
    margin: 0px 12px;
    border-radius: 6px;
    border: 1px solid gray;
}

#paginator_header_edit {
        border-top: 1px solid #aeaeae;
    padding: 12px 16px;
    display: flex;
  justify-content: right;/* Align items to the ends */
  align-items: center; /* Optional: Vertically align items (e.g., in the center) */
    width: 100%;
    /*height: 32px;*/
}

.paginator_header_edit_item {
    display: inline-block; 
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
}

#item_table {
    font-size: 12px;
    border-collapse: collapse;
    margin: 0 auto;
    margin-top: 8px;
}

#item_table th {
    text-align: left;
}

#item_table_container {
    height: 100%;
    overflow: auto;
    /*margin-top: 16px;*/
    border-top: 1px solid #ccc;
}
#item_table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/*#item_table tbody td:not(:nth-child( 4)) {*/
#item_table tbody td:not(:last-child) {
    border-right: 1px solid #bbb;
}

#item_table thead tr {
    border-bottom: 1px solid black;
}
#item_table tbody tr {
    border-bottom: 1px solid #888;
}
#item_table tbody td {
}

/*
 baby blue - unassigned -- 4eced4
    pink - assigned/active -- f48378
    red - alert/on hold -- d42026
    green - totally done/need to invoice -- 4eb048
    yellow - has been invoiced -- f3d058
    */

.bg_babyblue {
    background-color: #4eced444 !important;
}

.bg_pink {
    background-color: #f4837844 !important;
}

.bg_lightgreen {
    background-color: #4eb04844 !important;
}

.bg_red {
    background-color: #d4202644 !important;
}

.bg_yellow {
    background-color: #f3d05844 !important;
}

#item_table td,th {
    padding: 6px
}

.hover_effect:hover {
    background-color:#d8d8d8 !important;
}

.hover_effect_text:hover {
    color: #3366cc !important;
}

.input-wrapper {
  position: relative;
  display: inline-block;
    margin-right:16px;
}

.input-wrapper .material-symbols-outlined {
  position: absolute;
  left: 12px;              /* distance from left edge */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;   /* icon won't block typing/clicks */
  font-size: 16px;
}

.input-wrapper input {
  padding-left: 36px !important;     /* make room for the icon */
  height: 32px;           /* optional: nice height */
  font-size: 12px;
    border-radius: 16px;
    border: 1px solid #333;
}



.button {
    border: 1px solid #5596E6;
    color: #fff;
    background-color: #5596e6;
    
    border-radius: 16px;
    cursor: pointer;
    padding: 6px 16px 6px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    height: 32px;
}

.button:hover:enabled {
    background-color: #5596E6 !important;
    border-color: #5596E6 !important;
    color: #eee !important;
}

.button:disabled{
    opacity: 0.5;
}

.button_clear {
    border: 1px solid #333;
    color: #333;
    background-color: white;
    
    border-radius: 16px;
    cursor: pointer;
    padding: 6px 16px 6px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    height: 32px;
}

.button_clear:hover:enabled {
    background-color: #5596E6 !important;
    border-color: #5596E6 !important;
    color: #eee !important;
}

.button_clear:disabled{
    opacity: 0.5;
}

.table_sub_header {
    display: flex;
    justify-content: space-between;
    padding: 16px;
}


.appt_split {
    display: flex;
    height: 100%;
}

.appt_split_left {
    min-width: 380px;
    border-right: 1px solid #aeaeae;
}

.appt_split_right {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.flex_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 0px 16px;
}

#the_edit_container {
    height: 100%;
    /*
    max-width: 500px;
    */
    background-color: white;
}

#the_edit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*
    width: 40%;
    min-width: 540px;
    */
    height: 100% !important;
    border-right: 1px solid #aeaeae;
}

.edit_title_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;

}

.edit_footer_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    text-align: right;
    display: flex;
    justify-content: space-between; /* Align items to the ends */
    align-items: center;
    padding: 0px 16px;
    border-top: 1px solid #aeaeae;
}

.edit_title {
    font-weight: bold;
    font-size:16px;
    display: inline-block;
}

#appt_form_container {
    flex: 1 1 auto;
    overflow: auto;
    width: 550px;
}

#form_container {
    flex: 1 1 auto;
    overflow: auto;
}

.appoint_button {
    border: 1px solid blue;
    background-color: #eaeaea;
    border-radius: 16px;
    cursor: pointer;
    padding: 6px 12px 6px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}

#terp_list {
    flex: 1 1 auto;
    height: 100%;
    overflow: auto;
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    padding: 12px;
    min-width: 400px;
    min-width: 500px;
}

.form_item {
    min-width: 200px;
}

.form_item_value {
    font-weight: bold;
}

#form_table td {
    padding: 4px 0px;
}

#form_table tr:nth-child(even) {
  background-color: #f2f2f2; /* light gray for odd rows */
}


.form_item_container {
    padding: 8px 16px;
}
.form_item_container div {
    padding: 4px 0px
}

.form_row {
    display: flex;
}

.form_row div {
    flex: 1;
}


/*
#the_menu_container {
    overflow: auto;
    position: relative;
    margin: 24px 16px 24px 16px;
}

#the_menu {
    width: 40%;
    min-width: 540px;
}

#the_menu_wide {
    max-width: 90%;
    min-width: 540px;
    margin: 0 auto;
    margin-top: 24px;
}

.menu_title_container {
    color: #444;
    height: 32px;
}

.menu_footer_container {
    color: #444;
    height: 32px;
    border-radius: 0px, 0px, 8px 8px;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: left;
}

.menu_title {
    font-weight: bold;
    font-size:16px;
    display: inline-block;
}

.menu_item {
    border: 2px solid #333366;
    border-radius: 4px;
    margin: 8px;
    color:#444;
    white-space: nowrap;
}

.menu_item_text {
    display: inline-block; 
    width: 75%; 
    white-space: wrap;
    margin-left: 12px;
}
*/






#the_toc_container {
    display: flex;
    justify-content: center;
}

#the_toc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100% !important;
}

.toc_title_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;

}

.toc_footer_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    text-align: right;
    display: flex;
    justify-content: space-between; /* Align items to the ends */
    align-items: center;
    padding: 32px 16px;
    background-color: white;
}

.toc_title {
    font-weight: bold;
    font-size:16px;
    display: inline-block;
}














#the_menu_container {
    height: 100%;
}

#the_menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*
    width: 40%;
    min-width: 540px;
    */
    height: 100% !important;
    border-right: 1px solid #aeaeae;
}

.menu_title_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    background-color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;

}

.menu_footer_container {
    flex: 0 0 auto;
    color: #444;
    height: 48px;
    text-align: right;
    display: flex;
    justify-content: space-between; /* Align items to the ends */
    align-items: center;
    padding: 0px 16px;
    border-top: 1px solid #aeaeae;
    background-color: white;
}

.menu_title {
    font-weight: bold;
    font-size:16px;
    display: inline-block;
}






/*



#the_menu_container {
    overflow: auto;
    position: relative;
    margin: 24px 16px 24px 16px;
}

#the_menu {
    width: 40%;
    min-width: 540px;
}

#the_menu_wide {
    max-width: 90%;
    min-width: 540px;
    margin: 0 auto;
    margin-top: 24px;
}

.menu_title_container {
    color: #444;
    height: 32px;
}

.menu_footer_container {
    color: #444;
    height: 32px;
    border-radius: 0px, 0px, 8px 8px;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: left;
}

.menu_title {
    font-weight: bold;
    font-size:16px;
    display: inline-block;
}

.menu_item {
    border: 2px solid #333366;
    border-radius: 4px;
    margin: 8px;
    color:#444;
    white-space: nowrap;
}

.menu_item_text {
    display: inline-block; 
    width: 75%; 
    white-space: wrap;
    margin-left: 12px;
}
*/









.bar:hover {
    background-color: #eee;    
}

.bar {
  display: flex;
  height: 48px;
  width: 100%;
    
}

.bar > .left {
  width: 48px;
  display: flex;
  align-items: center;   /* vertically center content */
  justify-content: center;
}

.bar > .right {
  display: flex;
  align-items: center;   /* vertically center content */
  justify-content: center;
  cursor: pointer;
    margin-right: 16px;
}

.bar > .middle {
  flex: 1;               /* take up remaining space */
  display: flex;
  align-items: center;   /* vertically center text */
  justify-content: flex-start; /* left justify text */
  margin-left: 16px;
    overflow: hidden;
    width:100%;
}


.bar_holder {
    flex: 1 1 auto;
    overflow: auto;
}

.content_name {
    padding-top: 4px;
    padding-bottom: : 4px;
    overflow: hidden;
    white-space: nowrap;
    width: 95%;
    text-overflow: ellipsis;
    display: block;
}

.content_name_sub {
    padding-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    width: 95%;
    text-overflow: ellipsis;
    opacity: .6;
    display: block;
}






.appt_item {
    border: 1px solid #aeaeae;
    margin: 16px;
    padding: 8px;
    border-radius: 8px;
}












.no_select {
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

.hover_highlight:hover {
    /*background-color: #edeff2;
    background-color: #e7f0fd;*/
    background-color: #eaeaea;
}


@media only screen and (max-width: 768px) {
    #page {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 48px  auto;
        grid-template-areas:
            "header"
            "main";
    }
}

@media only screen and (min-width: 768px) {
    #page {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 64px auto;
        grid-template-areas:
            "header"
            "main";
    }

    #the_toc {
        min-width: 640px;
    }
}

#page2 {
    width: 100%;
    height: 100%;
    background-color: rgba(64,64,64,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: right;
}

.overlay {
    width:100%;
    height:100%;
    overflow: auto;
    z-index: 2;
}

/*
#page2 {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify: center;
}
*/

#page3 {
    width: 100%;
    height: 100%;
    /*background-color: rgba(255,255,255,0.8);*/
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

#page4 {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 64px;
    left: 0;
    display: flex;
    justify: center;
}

.input_square {
    height: 32px;
    margin: 8px 0px 8px 0px;
    border-radius: none;
    width: 100% !important;
}

input[type="text"] {
    height: 32px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid gray;
}


select {
    height: 32px;
    border-radius: 12px;
    padding: 0px 24px 0px 12px;

    appearance: none;
    background-image:
    linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%);
    background-position:
    right 12px center,
    right 6px center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.button_select {
    height: 34px;
    border-radius: 8px;
    margin-left: 4px;
    padding: 2px 24px 0px 16px;
}

.modal_div{
    margin: 12% auto;
    padding: 24px;
    border: 1px solid gray;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    background-color: white;
    max-height: 85%;
}

/*
#appt_form {
    background-color: white;
}
*/

.arrow_button {
    padding: 8px;
    margin-right: 8px;
    margin-left: 8px;
    font-size: 16px;
    color: #666;
    border: 1px solid #666;
    border-radius: 3px;
}

.dropdown {
    /*display: none;*/
    position: absolute;
    top: 28px;
    left: 0px;
    background-color: white;
    border: 1px solid black;
    z-index: 2;
}

.dropdown div {
    padding: 4px;
}

.dropdown div.tabbed {
    background-color: green;
}

.dropdown div:hover {
    background-color: cyan;
}

.appt_button_selected_mobile {
    border: 1px solid #aeaeae;
    color: black;
    background-color: white;
    
    border-radius: 16px;
    cursor: pointer;
    padding: 6px 16px 6px 16px;
    margin-left: -12px;
    margin-right: -12px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}

.appt_button_bar_container_mobile {
    height: 64px;
    padding: 12px 16px;
}

.appt_button_bar_mobile {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border-radius: 8px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #eaeaea;
}



.appt_button_desktop {
    border: 1px solid #aeaeae;
    color: black;
    background-color: #eaeaea;

    border-radius: 8px;
    cursor: pointer;
    padding: 8px 16px 8px 16px;
    margin-left: 4px;
    margin-right: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}

.appt_button_selected_desktop {
    border: 1px solid black;
    background-color: yellow;
}

.appt_button_bar_container_desktop {
    height: 64px;
}

.appt_button_bar_desktop {
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items: center;
    height: 100%;
    border-radius: 8px;
}






#the_header {
    grid-area: header;
    border-bottom: 1px solid #aeaeae;
    overflow: auto;
}

.header_bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header_text {
    padding: 16px;
    font-size: 14px;
    cursor: pointer;
}

.header_text:hover {
    color: blue;
}

.header_text_selected {
    color: blue;
}


















#main_panel {
    grid-area: main;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#right_panel {
    grid-area: sidebar;
    border-right: 1px solid #aeaeae;
    padding: 16px;
    overflow: auto;
}

#sugtag_remove_select {
    margin-top: 8px;
    width: 100%;
    height: 35%;
    overflow: auto;
    border: 1px solid gray;
}

#tag_box {
    margin-top: 8px;
    margin-bottom: 6px;
    width: 100%;
    height: 30%;
}


/*
#the_header:hover {
    overflow: auto;
}

#main_panel:hover {
    overflow: auto;
}

#right_panel:hover {
    overflow: auto;
}
*/

.cursor_pointer {
    cursor: pointer;
}

.nav_item_selected {
    background-color: #dddddd;
    border-radius: 4px;
}

.nav_item_selected .material-symbols-outlined {
    color: black;
}


.nav_item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items: center;
    padding: 8px;
    
}

.nav_item:hover {
    background-color: #cccccc;
    border-radius: 4px;
}

.nav_item_text {
    padding-left: 12px;
    font-size: 14px;
    color: black;
}

.gray {
    color: #aeaeae;
}

.fontsize_20 {
    font-size: 20px !important;
}


.input_holder {
    margin-top: 12px;
    position: relative;
}

.clear_input_button {
    position: absolute;
    top: 3px;
    right: 4px;
}

.button_tiny {
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 2px;
    padding: 1px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 8px;
    color: #515151;
    background-color: #ddd;
    height: 16px;
}

.button_tiny:hover:enabled {
    background-color: #5596E6;
    border-color: #5596E6;
    color: #fff;
}

.box_maker {
    border: 1px solid #a8a8a8;
    margin-bottom:8px;
    display: inline-block;
    
    margin-top: 20px;
    margin-right: 20px;
    padding-right: 4px;
    /*
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 8px;
    
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 16px;
    margin-right: 8px;
    */
    
    height: 24px;
    
    border-radius: 4px;
    cursor: pointer;
}

.box_maker:hover {
    background-color: #eaeaea;
}

.box_placeholder {
    display: inline-block;
    transform: translate(0%, -55%);
    margin-left: 12px;
    
}


.box_menu {
    position: absolute;
    border: 1px solid #a8a8a8;
    z-index: 11000;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
}

.box_choice_holder {
    min-width: 80px;
    overflow-y: auto;
    /*max-height: 100%;*/
}

.box_choice:hover {
    background-color: #edeff2;
}

.box_choice {
    padding: 12px;
    padding-left: 16px
}
#content_grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px; /* Space between grid items */
      padding: 20px;
      margin: 0 auto;
}

.content_item {
}

.content_image_hack {
    max-width: 100%;
    max-height: 87vh;
    object-fit: contain;
    display: block;
    margin: auto;
}

.content_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* transform: translateY( 1% ); */
}

.content_image_container {
    width: 100%;
    height: 90%;
    aspect-ratio: 1/1;
    border: 1px solid #a8a8a8;
}


.desc_box {
    border: 1px solid blue;
    padding: 8px;
    margin-top: 8px;
}




#thumb_grid {
      display: grid;
      grid-template-columns: 64px;
      grid-template-rows: 64px;
}

.tagbar_container {
    padding-top: 12px;
    padding-left: 16px;
}

.tag_button {
    border-radius: 16px;
    height: 28px;
    margin: 8px 8px 0px 0px;
    border: 1px solid #a8a8a8;
    padding: 5px 14px;
    background-color: #f4f4f4;
}

.tag_button_selected {
    border: 1px solid #3d70b2 !important;
    background-color: #e7f0fd !important;
}

.paper_menu {
    position: absolute;
    border: 1px solid #aeaeae;
    z-index: 10020;
    background-color: white;
}

.paper_choice_holder {
    min-width: 160px;
}

.paper_choice:hover {
    background-color: #edeff2;
    
}

.paper_choice {
    padding: 8px;
    white-space: nowrap;
}




.dialog_div{
    margin: auto;
    padding: auto;
    border: 1px solid #000;
    background-color: #fff;
    width: 75%;
}

.imagepop_div{
    margin: auto;
    padding: auto;
    border: 1px solid #000;
    background-color: #fff;
    max-width: 90%;
}


.imagepop_img_container {
    margin: 0px;
    padding: 0px;
}


.dialog_header {
    width: 100%;
    height: 32px;
    background-color: #3c3c3c;
    color: #fff;
}

.dialog_title {
    display: inline-block;
    padding-left: 8px;
    padding-top:8px;
}

.right_floater {
    float: right;
}

.closer_holder {
    width: 32px;
    height: 32px;
    padding-left: 6px;
    padding-top:4px;
}

.closer_holder:hover {
    background-color: red;
    cursor: pointer;
}


.maxwidth500 {
    max-width: 500px;
}

.maxwidth800 {
    max-width: 800px;
}


.header_text_holder {
    padding-top: 12px;
    padding-left: 16px;
}


/*
#k_value_slider {
    width: 200px;
}
*/





/* ------------------------ */




























.dialog_tr:hover {
    background-color: #f6f6f6;
}

.dialog_table td {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: .875rem;
    height: 32px;
}

.bold_text {
    font-weight: bold;
}




.kc_canvas {
    border: 1px solid #999;
    border-radius: 2px;
    display: inline-block;
    height: 100%;
    width: 100%;
}

#editor_disabler {
    position:absolute;
    width: 100%;
    z-index: 4;
    opacity: .75;
    background-color: #fff;
    top: 120px;
    bottom: 0px;
}


.rounded {
    border-radius: 22px;
}

.uniform_true {
    width: 78px;
}

.uniform_false {
    min-width: 78px;
    max-width: 224px;
}

.banner_kc {
    height: 45px;
    display: inline-block;
    margin: 1rem .5rem;
    border: 1px solid #999;
}

.banner_background_container, .banner_image_container, .banner_text_container_holder {
    width: 100%;
    height: 100%;
}


.banner_text_container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: .75rem;
    z-index: 5;
}


.banner_background_container {
    z-index: 3;
}

.banner_text_container_holder {
    transform: translate(0%, -200%);
 }

.banner_image_container {
    transform: translate(0%, -100%);
    z-index: 2;
}

.banner_kc_canvas {
    position: absolute;
    height: 100%;
    width:100%;
}

.banner_info {
    height: 6.5rem;
    width: 100%;
    text-align: center;
}

#banner{
    padding-top: rem;
    position:relative;
    width: auto;
    top: 0;
    height: 9rem;

    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

#banner:hover {
    overflow-x: auto;
}


#banner_view_box:hover
#banner_svg path {
    fill: #515151;
}

#grid_view_box:hover
#grid_svg path {
    fill: #515151;
}

.svg_selected path {
    fill: #515151;
}


#square_corner_box:hover
#square_svg path {
    stroke: #515151;
}

#round_corner_box:hover
#round_svg path {
    stroke: #515151;
}

.svg_selected2 path {
    stroke: #515151;
}


#grid_view_box {
  padding-top:7px;
  padding-right: 0px;
}

#banner_view_box {
  padding-top:7px;
  padding-right: 0px;
}



.background_container, .image_container, .text_container {
    width: 100%;
}

.background_container, .image_container {
    height: 100%;
}

.background_container {
    z-index: 3;
}

.ambiguous_background {
    line-height: 2.5rem;
    font-weight: bold;
    font-size: 1.75rem;
    color: #444;
}

.ambiguous_text {
    line-height: 2.5rem;
    font-weight: bold;
    font-size: 1.75rem;
    color: #ddd;
}

.image_container {
    transform: translate(0%, -100%);
    z-index: 2;
}

.text_container {
    z-index: .5;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.25rem;
    overflow-wrap: break-word;
}

.text_left {
    text-align: left;
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.text_top {
    width: 100%;
    position: absolute;
    top: 5%;
}

.text_middle {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}

.text_bottom {
    width: 100%;
    position: absolute;
    bottom: 5%;
}

#header {
    position: absolute;
    width: 100%;
    top: 0;
    height: 4.125rem;
    border-bottom: 1px solid #d4d4d4;
}

#main {
    border-top: 1px solid #d4d4d4;
    position: absolute;
    width: 100%;
    top: 0rem;
    bottom: 0;
}

#mainmain {
    position: absolute;
    width: 100%;
    top: 4.125rem;
    bottom: 0rem;
    padding: 1rem;
    overflow: auto;
}

#left_pane {
    position: absolute;
    width: 300px;
    height: 100%;
    left: 0;
    bottom: 0;
    overflow: auto;
    border-right: 1px solid #d4d4d4;
}

#right_pane {
    position: absolute;
    width: 300px;
    height: 100%;
    right: 0;
    bottom: 0;
    border-left: 1px solid #d4d4d4;
    overflow: auto;
    padding-top: 1.75rem;
}

.bigger {
    font-size: 1.25rem;
}

#main_pane {
    position: absolute;
    height: 100%;
    top: 0rem;
    bottom: 0;
    left: 300px;
    right: 300px;
}

.key_delete_td div {
    text-align: center;
    height: 2rem;
    width: 2rem;
    line-height:2rem;
    margin-right: .75rem;
    color: #a8a8a8;
}

.key_delete_td div:hover {
    background-color: #eaeaea;
    color: #515151;
}

.number_td {
    text-align: center;
    width: 1.75rem;
}

.number_td div {
    height: 2rem;
    width: 2rem;
    background-color: #eaeaea;
    line-height:2rem;
}
.key_plus_td div {
    height: 2rem;
    width: 2rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.9rem;
    border: 1px dashed #515151;
    border-radius: 2px;
}

hr {
    border-top: 1px solid #ddd;
}

#header table tr td {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.keyname_td {
    padding-left: 1.25rem;
}

.drag_td {
    width:2rem
}

#key_table td {
    height: 56px;
    border-top: 8px solid white;
    border-bottom: 8px solid white;
}

#key_table tr:hover {
    background-color: #f3f3f3 !important;
    cursor: pointer;
}

.pane_header {
    height: 4rem;
    line-height: 4.5rem;
    padding-left: 1.5rem;
}

.small_td {
    font-size: .875rem;
    color: #777;
    padding-left: 1.25rem;
}

.miniheader {
    padding-left: 1.25rem;
    font-weight: 500;
}

.control_td {
    padding-right: 1.25rem;
}

.editor_table {
}

.editor_table td {
    padding-bottom: 1rem;
}

#text_color_box {
    height: 100%;
    width: 100%;
}

#background_color_box {
    height: 100%;
    width: 100%;
}

.hover_border:hover {
    border: 1px solid #515151;
    cursor: pointer;
}

#inputfile_text {
    display: inline-block;
    transform: translate(-12%, -40%);
}


input[type="range"] {
  -webkit-appearance: none;
  margin-right: 11px;
  width: 83px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  background-image: linear-gradient(#515151, #515151);
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #515151;
  cursor: ew-resize;
}

input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.control_boxer {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    margin-left: .5rem;
    color: #a8a8a8;
}

.control_boxer_16_9 {
    display: inline-block;
    min-width: 4.88rem;
    height: 2.75rem;
    text-align: center;
    margin-left: .5rem;
}

.control_boxer_16_9:hover {
    background-color: #000 !important; 
    color: #fff !important;
    cursor: pointer;
}

.control_boxer:hover {
    background-color: #eaeaea;
    color: #515151;
    cursor: pointer;
}

.control_boxer_hack {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    margin-left: .5rem;
    padding-top: .5rem;
}

.control_boxer_auto_width {
    display: inline-block;
    height: 2.75rem;
    text-align: center;
    margin-left: .5rem;
    padding-top: .333rem;
}

.control_boxer_selected {
    background-color: #eaeaea;
    color: #515151
}

.keychooseritem_disabled {
    opacity: .2;
}

.keychooseritem_selected {
    background-color: #ddd;
    font-weight: bold;
}

.bordered {
    border: 1px solid #a8a8a8;
}

.border_top {
    border-top: 1px solid #444;
}

.border_bottom {
    border-bottom: 1px solid #444;
}





.dialog_table {
    width: 320px;
    border-bottom: 1px solid #ddd;
}

.keychooser_header {
    padding: 16px;
    font-weight: bold;
    font-size: 10px;
}

.keychooser_footer {
    padding: 12px;
    font-weight: bold;
    font-size: 10px;
}


.keychooser_footer div {
    display: inline-block;
    float: right;
    padding-bottom: 12px;
    padding-left: 8px
}

.dialog_table, #main_pane, #right_pane, .add_key_tr {
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

.channels_grid {
    padding-top: 1rem;
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    /* row-gap: 1rem; */
    column-gap: 0%;
}

.channels_div {
    display: inline-grid;
    margin-bottom: 1.5rem;
}


.channels_name {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    margin-top: .5rem;
    margin-bottom: .5rem;
    opacity: .8;
}


@media only screen and (min-width: 768px) {
    .channels_grid {
        grid-template-columns: 100%;
    }
}

@media only screen and (min-width: 1000px) {
    .channels_grid {
        grid-template-columns: 49% 49%;
        column-gap: 2%;
    }
}

@media only screen and (min-width: 1300px) {
    .channels_grid {
        grid-template-columns: 32% 32% 32%;
        column-gap: 2%;
    }
}
@media only screen and (min-width: 1650px) {
    .channels_grid {
        grid-template-columns: 23% 23% 23% 23%;
        column-gap: 2.5%;
    }
}


.responsive-container {
    position: relative;
    cursor: pointer;
}      

.squash_16x9 {
    padding-top: 57%;
}


.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}      

.img-container .centerer {
    display: inline-block;
    vertical-align: middle;
    /*
    height: 10%;
    */
}      

.img-container img {
    /*
    vertical-align: middle;
    */
    
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

.channel_desc_container {
    position:relative;
    height: 0px;
    top: 1.5rem;
    left: .5rem;
    max-width: 97%;
    text-align: left;

    z-index:1;
}

.channel_desc{
    display: inline-block;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    max-width: inherit;
    color: #3c3c3c;
}


.enclosed {
    border: 1px solid #ccc;
    border-radius: 2px;
}

.enclosed_red {
    border: 2px solid red;
    border-radius: 2px;
}

.enclosed_blue {
    border: 2px solid #3D70B2;
    border-radius: 4px;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-symbols-outlined {
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}


.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px; /* Preferred icon size */
    display: inline-block;
    line-height: 1.33;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons-smaller {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px; /* Preferred icon size */
    display: inline-block;
    line-height: 1.125;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* ********************************** */


.button-primary {
    color: #262626;
}

.button-secondary {
    color: #262626;
    background-color: white;
}

.button-black {
    color: #fff;
    background-color: #3D70B2;
}

.label_shrinker {
    display: inline-block;
    height: 2rem;
    background-color: red;
    height: 2.75rem;
    border: 1px solid;
    width: 4.25rem;
}

.label-button-input {
    cursor: pointer;
    display: inline-block;
    padding: 14px 16px 6px 16px;

    background: url('/img/avail-512-32.png') no-repeat center;
    background-size: contain;
    opacity: 1;
}



.label-button-input:hover {
    background-color: #515151 !important;
    border-color: #515151 !important;
    color: #fff !important;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

input[type="file"] {
    background-color: initial;
    cursor: default;
    align-items: baseline;
    color: #262626 !important;
    text-overflow: ellipsis;
    white-space: pre;
    text-align: start !important;
    padding: initial;
    border: initial;
    overflow: hidden !important;
}

input[type=file]::file-selector-button {
    cursor: pointer !important;
    border: 1px solid #515151 !important;
    border-radius: 2px !important;
    padding: 6px 16px 6px 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    color: #515151 !important;
    height: 32px !important;
}

input[type=file]::file-selector-button:hover {
    background-color: #515151 !important;
    border-color: #515151 !important;
    color: #fff !important;
}





.hidden {
    display: none !important;
}




/************************************ */
.jumptop_control {
    position: absolute;
    z-index: 5;
    bottom: 5rem;
    right: 1rem;
    text-align: center;
    background-color: #eee;
    opacity: .7;
}

.icon_and_text {
    display: inline-block;
    text-align: center;
    line-height: .75rem;
    font-size: .6rem;
    padding-top: .25rem;
}

#dot_canvas {
    z-index: 25;
}

#dot_holder {
    position: absolute;
    bottom: .5rem;
}

.pagetitle {
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5rem;
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    opacity: .8;
}

.rotate_45 {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}


.rotate_90 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.rotate_135 {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}

.rotate_180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.rotate_225 {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}

.rotate_270 {
    transform: rotate(90deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
}

.rotate_315 {
    transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -o-transform: rotate(315deg);
}



/* nav divs */

#footer {
    position: absolute;
    width: 100%;
}

.topnav {
    padding-top: 1rem;
    border-bottom: 1px solid #d4d4d4;
}
    


.subnav {
    width: 100%;
    padding-top: 8px;
}

.resultnav {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1rem;
}

#resultnav {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1rem;
}

.curtail {
    text-overflow: ellipsis;
    width: 75%;
}

.result_text {
    white-space: nowrap;
    overflow: hidden;
    font-size: .75rem;
}

.bottomnav {
    padding-top: .625rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-top: 1px solid #d4d4d4;
}
    


    
.searchbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border: none;

    outline:0;
    height:2.3rem;
    width: 100%;
    text-indent: 1rem;
    font-size: 1rem;
}

.searchbox::placeholder {
    text-indent: 1rem;
    font-size: 1rem;

    display: inline;
}

.search_container {
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    height: 2.5rem;
}

.searchnav {
    width: 100%;
    padding-top: .75rem;
    padding-left: 1rem;
    /*
    padding-right: 16px;
    */
}

.clear_search_holder {
    position: absolute;
    display: none;
    right: 2.5rem;
    top: .75rem;
}

.searchnav .icon_and_text {
    padding-top: .5rem;
    padding-left: .5rem;
}








.special_nav_container {
    display: flex;
    justify-content: space-between;
    width:100%;
    position: absolute;
    line-height: 1.5rem;
}

.nav_container {
    display: flex;
    justify-content: space-between;
    width:100%;
    position: absolute;
    line-height: 1.5rem;
}

.evenly_spaced {
    font-size: 1rem;
}

.evenly_spaced a {
    float: left;
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    /*margin: 8px;*/
}



.logout_button {
    text-align: center;
    border:1px solid #999;
    height: 3rem;
    position:absolute;
    right: 1rem;
    left: 1rem;
    bottom: 2.5rem;
}


.icon_holder {
    line-height: 60px;
    padding-right: 20px;
    margin-left: -48px;
}

.div_holder {
    position: absolute;
    margin-top: 12px;
    display: inline-block;
}

.text_holder {
    font-size: 1.25rem;
    opacity: .8
}

h3 {
    opacity: .8;
}

span {
    opacity: .8;
}



#container {
    position: relative;
    display:inline-block;
    max-height: 100%;
    max-width: 100%;
}

/* #canvas { */
.layer_canvas {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    position:absolute;
    z-index:20;
}
.message1 {
    line-height: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    display: block;
}


.bottom-border-only {
    border-bottom:1px solid #ccc;
}

.bottom-border-and-padding {
    border-bottom:1px solid #ccc;
    padding-bottom: 8px;
}


.channel_subdesc {
    color: #666666;
}

.content_grid {
    display: grid;
    width: 100%;
    row-gap: 2rem;
    grid-template-columns: 47% 47%;
    column-gap: 6%;
    padding-bottom: 2rem;
}

.content_div {
    display: inline-grid;
}


.content_name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .8;
}



/* content */

.content_table_lview {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.content_table_lview td {
    /*
    max-width: 0;
    */
    max-width: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content_td_img_lview {
    width: 3rem;
    border: 1px solid #aaa;
    text-align: center;
    padding: 0;
}

.content_td_name_lview {
    padding-left: 1rem;
}

.content_img_lview {
    max-width: 100%;
    max-height: 3rem;
    display: block;
    margin: auto;
}


.content_tr_lview {
    height: 3rem !important;
}








/* channels */

.channels_table_lview {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

.channels_table_lview td {
    /*
    max-width: 0;
    */
    max-width: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channels_td_img_lview {
    width: 3rem;
    height: 1.6875rem;
    border: 1px solid #aaa;
    text-align: center;
    padding: 0;
    vertical-align: top;
}

.channels_td_name_lview {
    padding-top: 6px;
    padding-left: 1rem;
}

.channels_img_lview {
    max-width: auto;
    max-height: 1.6875rem;
    display: block;
    margin: auto;
}


.channels_tr_lview {
    height: 1rem !important;
}









.smaller {
    font-size: .75rem;
}


.content_info_header {
    margin-top: 2rem;
    margin-bottom: 2rem;
    white-space: nowrap;
    overflow: hidden;
}

.content_info_thumb {
    display: inline-block; 
    width: 3rem;
    margin-right: 1rem;
}

.content_info_name {
    display: inline-block;
}


.content_info_title {
    text-overflow: ellipsis;
    display: inline-block;
    font-weight: bold;
    opacity: .8;
}


.content_info_date {
    font-size: .75rem;
    margin-bottom:.5rem
}

.content_info_attr_header {
    margin-top:2rem;
    margin-bottom:1rem;
    font-weight: bold;
    font-size: 1rem;
    opacity: .8;
}

.content_info_tag_key {
    font-weight: bold;    
    padding-right: 1.5rem;
    opacity: .8;
}

.content_info_tag_value {
}

#content_item_menu {
    display: none;

}

.menu_item {
    line-height: 2.5rem;
}

.menu_item_text {
    vertical-align: top;
    line-height: 2rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.info_section {
    position: absolute;
    width: 100%;
    height: 80%;
    padding-left: 1rem;
    padding-right: 1rem;
    top: 20%;
    z-index: inherit;
}

@media (prefers-color-scheme: light) {
    .info_section {
        background-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    .info_section {
        background-color: black;
    }
}

.dimmer {
    position: absolute;
    background-color: rgba(0,0,0,.6);
    top: 0;
    height: 20%;
    width: 100%;
    z-index: inherit;
}


.lists {
    top: 1.5rem;
    bottom: 1.5rem;
    width: 100%;
    position: absolute;
    overflow: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.spinner_container {
    margin: auto;
    padding: auto;
}

.spinner {
    border: 6px solid #515151;
    border-radius: 50%;
    border-top: 6px solid #f4f4f4;
    width: 48px;
    height: 48px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
    display: inline-block;
    top: 50%;
}

.center-message {
    margin: 0;
    /*
    color: #262626;
    */
    text-align: center;
    top: 40%;
    width: 100%;
    position: relative;
}

.center {
    margin: 0;
    position: absolute;
    top: 53%;
    left: 50%;
    width: 100%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}


.gray_back {
  animation: animateBg 2.5s linear infinite;
  background-image: linear-gradient(270deg,#d4d4d4,#f4f4f4,#d4d4d4);
  background-size: 1100% 100%;
}
@keyframes animateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}


/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}




/* ----------------------------------- */


.transup_13 {
    transform: translate(0%, -13%);
}

.transdown_13 {
    transform: translate(0%, 13%);
}

.transdown_15 {
    transform: translate(0%, 15%);
}

.transdown_33 {
    transform: translate(0%, 33%);
}

.transdown_50 {
    transform: translate(0%, 50%);
}

.transup_20 {
    transform: translate(0%, -20%);
}

.transup_26 {
    transform: translate(0%, -26%);
}

.transup_50 {
    transform: translate(0%, -50%);
}


.padleft4, tr.padleft4>td {
    padding-left: 4px;
}

.padleft8, tr.padleft8>td {
    padding-left: 8px;
}

.padleft12, tr.padleft12>td {
    padding-left: 12px;
}

.padleft16, tr.padleft16>td {
    padding-left: 16px;
}

.padleft20, tr.padleft20>td {
    padding-left: 20px;
}

.padleft24, tr.padleft24>td {
    padding-left: 24px;
}

.padleft28, tr.padleft28>td {
    padding-left: 28px;
}

.padleft32, tr.padleft32>td {
    padding-left: 32px;
}

.padleft36, tr.padleft36>td {
    padding-left: 36px;
}

.padright4, tr.padright4>td {
    padding-right: 4px;
}

.padright8, tr.padright8>td {
    padding-right: 8px;
}

.padright12, tr.padright12>td {
    padding-right: 12px;
}

.padright16, tr.padright16>td {
    padding-right: 16px;
}

.padright20, tr.padright20>td {
    padding-right: 20px;
}

.padright24, tr.padright24>td {
    padding-right: 24px;
}

.padright28, tr.padright28>td {
    padding-right: 28px;
}

.padright32, tr.padright32>td {
    padding-right: 32px;
}

.padright36, tr.padright36>td {
    padding-right: 36px;
}

.padtop4, tr.padtop4>td {
    padding-top: 4px;
}

.padtop8, tr.padtop8>td {
    padding-top: 8px;
}

.padtop12, tr.padtop12>td {
    padding-top: 12px;
}

.padtop16, tr.padtop16>td {
    padding-top: 16px;
}

.padtop20, tr.padtop20>td {
    padding-top: 20px;
}

.padtop24, tr.padtop24>td {
    padding-top: 24px;
}

.padtop28, tr.padtop28>td {
    padding-top: 28px;
}

.padtop32, tr.padtop32>td {
    padding-top: 32px;
}

.padtop36, tr.padtop36>td {
    padding-top: 36px;
}

.padbottom4, tr.padbottom4>td {
    padding-bottom: 4px;
}

.padbottom8, tr.padbottom8>td {
    padding-bottom: 8px;
}

.padbottom12, tr.padbottom12>td {
    padding-bottom: 12px;
}

.padbottom16, tr.padbottom16>td {
    padding-bottom: 16px;
}

.padbottom20, tr.padbottom20>td {
    padding-bottom: 20px;
}

.padbottom24, tr.padbottom24>td {
    padding-bottom: 24px;
}

.padbottom28, tr.padbottom28>td {
    padding-bottom: 28px;
}

.padbottom32, tr.padbottom32>td {
    padding-bottom: 32px;
}

.padbottom36, tr.padbottom36>td {
    padding-bottom: 36px;
}

.margleft4, tr.margleft4>td {
    margin-left: 4px;
}

.margleft8, tr.margleft8>td {
    margin-left: 8px;
}

.margleft12, tr.margleft12>td {
    margin-left: 12px;
}

.margleft16, tr.margleft16>td {
    margin-left: 16px;
}

.margleft20, tr.margleft20>td {
    margin-left: 20px;
}

.margleft24, tr.margleft24>td {
    margin-left: 24px;
}

.margleft28, tr.margleft28>td {
    margin-left: 28px;
}

.margleft32, tr.margleft32>td {
    margin-left: 32px;
}

.margleft36, tr.margleft36>td {
    margin-left: 36px;
}

.margright4, tr.margright4>td {
    margin-right: 4px;
}

.margright8, tr.margright8>td {
    margin-right: 8px;
}

.margright12, tr.margright12>td {
    margin-right: 12px;
}

.margright16, tr.margright16>td {
    margin-right: 16px;
}

.margright20, tr.margright20>td {
    margin-right: 20px;
}

.margright24, tr.margright24>td {
    margin-right: 24px;
}

.margright28, tr.margright28>td {
    margin-right: 28px;
}

.margright32, tr.margright32>td {
    margin-right: 32px;
}

.margright36, tr.margright36>td {
    margin-right: 36px;
}

.margtop4, tr.margtop4>td {
    margin-top: 4px;
}

.margtop8, tr.margtop8>td {
    margin-top: 8px;
}

.margtop12, tr.margtop12>td {
    margin-top: 12px;
}

.margtop16, tr.margtop16>td {
    margin-top: 16px;
}

.margtop20, tr.margtop20>td {
    margin-top: 20px;
}

.margtop24, tr.margtop24>td {
    margin-top: 24px;
}

.margtop28, tr.margtop28>td {
    margin-top: 28px;
}

.margtop32, tr.margtop32>td {
    margin-top: 32px;
}

.margtop36, tr.margtop36>td {
    margin-top: 36px;
}

.margbottom4, tr.margbottom4>td {
    margin-bottom: 4px;
}

.margbottom8, tr.margbottom8>td {
    margin-bottom: 8px;
}

.margbottom12, tr.margbottom12>td {
    margin-bottom: 12px;
}

.margbottom16, tr.margbottom16>td {
    margin-bottom: 16px;
}

.margbottom20, tr.margbottom20>td {
    margin-bottom: 20px;
}

.margbottom24, tr.margbottom24>td {
    margin-bottom: 24px;
}

.margbottom28, tr.margbottom28>td {
    margin-bottom: 28px;
}

.margbottom32, tr.margbottom32>td {
    margin-bottom: 32px;
}

.margbottom36, tr.margbottom36>td {
    margin-bottom: 36px;
}



.height32 {
    height: 32px;
}

.height40 {
    height: 40px;
}

.height48 {
    height: 48px;
}

.height56 {
    height: 56px;
}

.height64 {
    height: 64px;
}

.height72 {
    height: 72px;
}

.height80 {
    height: 80px;
}

.height88 {
    height: 88px;
}

.height96 {
    height: 96px;
}





.pad4, tr.pad4>td {
    padding: 4px;
}

.pad8, tr.pad8>td {
    padding: 8px;
}

.pad12, tr.pad12>td {
    padding: 12px;
}

.pad16, tr.pad16>td {
    padding: 16px;
}

.pad20, tr.pad20>td {
    padding: 20px;
}

.pad24, tr.pad24>td {
    padding: 24px;
}

.pad28, tr.pad28>td {
    padding: 28px;
}

.pad32, tr.pad32>td {
    padding: 32px;
}

.pad36, tr.pad36>td {
    padding: 36px;
}

.pad40, tr.pad40>td {
    padding: 40px;
}

.pad44, tr.pad44>td {
    padding: 44px;
}

.pad48, tr.pad48>td {
    padding: 48px;
}

.pad52, tr.pad52>td {
    padding: 52px;
}

.pad56, tr.pad56>td {
    padding: 56px;
}

.pad60, tr.pad60>td {
    padding: 60px;
}

.pad64, tr.pad64>td {
    padding: 64px;
}

.marg4, tr.marg4>td {
    margin: 4px;
}

.marg8, tr.marg8>td {
    margin: 8px;
}

.marg12, tr.marg12>td {
    margin: 12px;
}

.marg16, tr.marg16>td {
    margin: 16px;
}

.marg20, tr.marg20>td {
    margin: 20px;
}

.marg24, tr.marg24>td {
    margin: 24px;
}

.marg28, tr.marg28>td {
    margin: 28px;
}

.marg32, tr.marg32>td {
    margin: 32px;
}

.marg36, tr.marg36>td {
    margin: 36px;
}

.marg40, tr.marg40>td {
    margin: 40px;
}

.marg44, tr.marg44>td {
    margin: 44px;
}

.marg48, tr.marg48>td {
    margin: 48px;
}

.marg52, tr.marg52>td {
    margin: 52px;
}

.marg56, tr.marg56>td {
    margin: 56px;
}

.marg60, tr.marg60>td {
    margin: 60px;
}

.marg64, tr.marg64>td {
    margin: 64px;
}



/* Container for the toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
}

/* Hide default checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    transition: background-color 0.1s;
}

/* The circular slider */
.slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 1px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.1s;
}

/* Toggled state */
.toggle-switch input:checked+.slider {
    background-color: #5596e6;
}

.toggle-switch input:checked+.slider::before {
    transform: translateX(13px);
}

.toggle-text {
    margin-left: 20px;
    cursor: pointer;
}