* {margin: 0; padding: 0;}

body {
  background-color: #141f2d;
  font-family: Nunito, arial, verdana;
}

.naslov {
  font-size:27px;
  margin:15px 0px;
}

.naslov2 {
  font-size:27px;
  margin:15px 0px;
}


.grid-container {
  
  display: grid;
  grid-template-columns: 210px 1.1fr 1fr 1fr;
  grid-template-rows: 110px 0.3fr 2.6fr 0.4fr;
  gap: 0px 0px;
  grid-template-areas:
    "Top Top Top Top"
    "Left Dash Dash Dash"
    "Left Content Content Content"
    "Footer Footer Footer Footer";
}
.Top {
    

  display: grid;
  grid-template-columns: 210px 1.2fr 1fr;
  grid-template-rows: 0.9fr 1.1fr;
  gap: 0px 0px;
  grid-template-areas:
    "logo meteo profile"
    "logo navigare activity";
  grid-area: Top;
}

.logo { 
    
    
    grid-area: logo; }

.meteo { 
   

    grid-area: meteo; }

.profile { 
    background-color:#191b30;
    grid-area: profile; }

.navigare { 
    
     background-color:#141f2d;
     padding-top: 20px;
    grid-area: navigare; }

.activity { 
     background-color:#141f2d;
     padding-top: 15px;
    grid-area: activity; }

.Left { 
   
    
    grid-area: Left; }

.Footer {
    grid-area: Footer;
    /*       background-color:#191b30;

          border-style:solid;
    border-width:1px;
    border-color:black;
        */
}

.Dash {

    background-color:#252644;
   

 /* display: grid; */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "minidash minidash minidash"
    "buttons buttons buttons";
  grid-area: Dash;
  height: 237px;
}

.minidash { 
     background-color:#252644;
   
    height: 140px;
    grid-area: minidash; }

.minidashCont
{ 
    margin:15px;
  
    text-align:center;
     background-color:#1d1f34;
     height:115px;
}

.buttons { grid-area: buttons;
           background-color:#252644;
 height: 100px;
}
.buttonsCont
{ 
    margin:20px;
    padding:12px 30px;
   
     text-align:left;
     background-color: #1d1f34;
     height: 69px;
}


.Content {
    grid-area: Content;
    background-color: #252644;
  /*  height: 1967px;
    min-height: 1500px;
      */
}

.ContentCont {
    margin: 20px;
    padding: 12px 30px;
    text-align: left;
    background-color: white;
    height: auto;
    min-height: 1500px;
    line-height: 1.7;
    /*    height: 1900px;
    */

}

.filtersCont
{
    margin:0px;
   margin-bottom: 20px;
   padding:6px 0px;
     text-align:left;
     background-color: white;
     height: 50px;
     border-bottom-style:solid;
     border-bottom-width: 1px;
     border-bottom-color:gray;
}
.navigacija a
{
      
   text-decoration: none;
    font-size: 12px;
       
       margin-right: 5px;
       margin: 0px 5px;
}
.navigacija a:hover
{
      
   text-decoration: underline;
    font-size: 12px;
  
}
.navigacija 
{
       margin-left: 20px;
       font-size: 12px;
     
   text-decoration: none;
}

.Pretraga 
{
      float: right;
}

.Eksport 
{
      float: right;
}




#accordian {
    background: linear-gradient(to right,#051420, #0f102f);
    width: 210px;
    margin: 0px auto 0 auto;
    color: white;
    /*Some cool shadow and glow effect*/
    /*   box-shadow: 
        0 0 10px 1px rgba(0, 0, 0, .3)*/
}
/*heading styles*/
    : root {
--main-bg-color: coral;
}

#accordian h3 {
    font-size: 16px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
  /*   background: #191b30;   */

   background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*
#divA, #divB,  #divC,  #divD, #divE, #divF, #divG,:hover {
    */

#divA:hover, #divB:hover, #divC:hover, #divD:hover, #divE:hover, #divF:hover {
    background: linear-gradient(to right,#2b668c, #2b668c);
}

.belo {
        background-color:#fff !important;
  }



/*iconfont styles*/
#accordian h3 span {
    font-size: 16px;
    margin-right: 10px;
     
}

#accordian h3::before{ 
   
            content: "🔽"; 
          float:right;
          position:inherit;
          left: 190px;
            margin-right:7px;
            font-size: 10px;
   /*         margin-top: 8px;*/
            color: #507799;
        } 



/*list items*/
#accordian li {
    list-style-type: none;
 
}

/*links*/
#accordian ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
}

/*hover effect on links*/
#accordian ul ul li a:hover {
    background: #003545;
    border-left: 5px solid lightgreen;
}

/*Lets hide the non active LIs by default*/
#accordian ul ul {
    display: none;
}

#accordian li.active ul {
    display: block;
}

#accordian li.noactive ul {
    display: none;
}



/* ------------------------------------------------------------------------------acc2*/







#accordian2 {
 /*   background: linear-gradient(to right,#051420, #0f102f); */
    width: 210px;
    margin: 0px auto 0 auto;
    color: white;
    /*Some cool shadow and glow effect*/
    /*   box-shadow: 
        0 0 10px 1px rgba(0, 0, 0, .3)*/
}
/*heading styles*/
: root {
    --main-bg-color: coral;
}

#accordian2 h3, h2 {
    font-size: 16px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    /*   background: #191b30;   */
    /*  background: linear-gradient(#003040, #002535);  */
}
    /*heading hover effect*/
    #accordian2 h3 h2:hover {
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    }



/*iconfont styles*/
#accordian2 h3 h2 span {
    font-size: 16px;
    margin-right: 10px;
}

#accordian2 h3 h2::before {
    content: "🔽";
    float: right;
    position: inherit;
    left: 190px;
    margin-right: 7px;
    font-size: 10px;
    /*         margin-top: 8px;*/
    color: #507799;
}



/*list items*/
#accordian2 li {
    list-style-type: none;
}

/*links*/
#accordian2 ul ul li a {
    /*  color: white; */
    text-decoration: none;
    font-size: 16px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
}


    #accordian2 ul ul li a:hover {
        /* background: #003545;*/
        border-left: 10px solid lightgreen;
        border-right: 10px solid lightgreen;
        font-weight: bold;
    }

/*Lets hide the non active LIs by default*/
#accordian2 ul ul {
    display: none;
}

#accordian2 li.active ul {
    display: block;
}

#accordian2 li.noactive ul {
    display: none;
}


#accordian2 ul.active ul {
    display: block;
}

#accordian2 ul.noactive ul {
    display: none;
}









input[name=TxSearch] {
    width: 130px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 12px;
    background-color: white;
    background-image: url('images/searchicon.png');
    background-position: 3px 3px;
    background-repeat: no-repeat;
    /*  padding: 6px 20px 10px 25px; */
    margin-left: 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[name=TxSearch]:focus {
  width: 150px;
}

 .mybtn
{
   
    border-style: none;
    border-color: inherit;
    border-width: medium;
    background-color: #2E7D32; /* Green */
    color: white;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:6px;
    line-height:normal;
    }
/* 2026-05-12 acarter: removed orphan declarations + stray closing brace
   that were corrupting CSS parsing for everything that followed.
   The orphan lines (`color: red; background-color: #003545; }`) had no
   parent selector. Removed them entirely. */

 .mytxt
 {
   
    background-color: #fff; /* Green */
  border: none;
  color: black;
  padding: 6px;
 
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
 border-radius:6px;
 border-width:1px;
 border-style:solid;
}
       .mytxt:hover  {
	color: midnightblue;
     background-color: #ffd800;
}

        /* Dropdown Button */

        /* Dropdown Button */
.dropbtn {
  background-color: #2E7D32;
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-right:36px;
  float:right;
  text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}


 /* Dropdown Button Profile Top Right */
.dropbtn2 {
    background-color: rgba(76, 148, 174, 0.2);
    color: white;
    padding: 5px;
    font-size: 7px;
    border: none;
    /* margin-left: 140px; */
    padding: 11px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown2 {
  position: relative;
  display: inline-block;
  float:right;
  margin-right:25px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
  display: none;
  position: absolute;
   right:0;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
 
}

/* Links inside the dropdown */
.dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown2:hover .dropdown-content2 {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown2:hover .dropbtn2 {background-color: #3e8e41;}

/* 3*/
.dropbtn3 {
  background-color: rgba(76, 148, 174, 1);
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
  text-align: left;
      margin-left: 15px;
}


.dropdown3 {
  position: relative;
  display: inline-block;
  float:right;
    margin-right:36px;
  float:right;
    text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content3 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown3:hover .dropdown-content3 {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown3:hover .dropbtn3 {background-color: #3e8e41;}

.headerstyle {
    color: #000000;
    text-transform: uppercase;
    height: 35px;
    background-color: #a6c1bf;
    font-weight: bold;
    
    border-style: solid;
    border-width: 1px;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    
}

.rowstyle {




 border-color:Silver;
 border-style: solid;
 border-width: 1px;
 text-align:left;
 vertical-align:middle;
 padding:15px !important;


}

.columnstylecenter {


 text-align:center;
 vertical-align:middle;
 padding:15px !important;

}

.columnstyleleft {


 text-align:left;
 vertical-align:middle;
 padding:15px !important;

}

.styled-table tr th {
    padding-left: 25px;
    height: 40px;
    padding-right: 25px;
}

.styled-table tr td {
    padding-left: 25px;
    padding-right: 25px;
    height: 40px;
}




.button {
        background-color: #2c6b13 !important;
        -webkit-border-radius: 10px !important;
        border-radius: 10px !important;
        border: none !important;
        color: #eeeeee !important;
        cursor: pointer;
        display: inline-block;
        font-family: sans-serif;
        font-size: 13px !important;
       
        text-align: center;
        text-decoration: none;
      }
      @keyframes glowing {
        0% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
        50% {
          background-color: #49e819;
          box-shadow: 0 0 30px #49e819;
        }
        100% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
      }
      .button {
        animation: glowing 1300ms infinite;
      }




.glowRed {
    background-color: #ff0000 !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    border: none !important;
    color: #eeeeee !important;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 13px !important;
    text-align: center;
    text-decoration: none;
}

@keyframes glowing2 {
    0% {
        background-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }

    50% {
        background-color: #ed4a16;
        box-shadow: 0 0 30px #ff0000;
    }

    100% {
        background-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }
}

.glowRed {
    animation: glowing2 1300ms infinite;
}




/* The Modal (background)  __?????????????????*/
.modal {
    display: none; /*  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
 
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.modal input {

    height:35px;
}


/* The Modal    SMALL*/
.modalSm {
    display: none; /*  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-contentSm {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 600px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modalSm input {
    height: 35px;
}




    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    @keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }
    /* The Close Button */
    .close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  visibility:hidden;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 15px 16px;
  background-color: #236526;
  color: white;
}

.modal-body {padding: 0px 0px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #3D8B40;
    color: white;
    height: 12px;
}

.tooltip {
  position: relative;
  display: inline-block;
 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #051420;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -35px;
  left: -30px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.hiddencol
  {
    display: none;
  }

] {
    padding-left: 10px;
    padding-right: 10px;
}

.column2 {
    float: left;
    /* width: 40%; */
    padding: 20px;
    display: inline-block;
    width: calc(48% - 2px);
}

/* Clear floats after the columns */
.row2:after {
    content: "";
    display: table;
    clear: both;
}


@media screen and (max-width: 300px) {
    .column2 {
        width: 100%;
    }
}

input {
    padding-left: 8px;
    padding-right: 8px;
}

textarea:focus {
    background: pink;
    padding-left: 8px;
}

textarea {
    
    padding-left: 8px;
}


.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
  
}

    .styled-table thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
    }

    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
    }

    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
      background-color: #f3f3f3; 
        border-width: 2px;
        color: black;
    }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #ccc;
             background-color: #cfcfcf;
           
        }



            

        .styled-table tbody tr.active-row {
            font-weight: bold;
            color: #009879;
        }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    gap: 4px;
}

    .filter-group label {
        font-size: 13px;
        color: #555;
    }

    .filter-group input {
        font-size: 13px;
        color: #555;
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        min-width: 130px;
        background-color: #fff;
    }

.filter-control {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 130px;
    background-color: #fff;
}

.price-range {
    min-width: 150px;
    flex: 1;
    max-width: 400px;
    margin-left: 14px;
    margin-right: 14px;
}

#priceSlider {
    margin-top: 5px;
    margin-bottom: 5px;
}

.price-labels {
    font-size: 9px;
    color: #d5d5d5;
    margin-left: 22px;
    margin-top: 52px;
    position: absolute;
}


.icon-button {
    padding: 6px 10px;
    font-size: 14px;
    background-color: #ffffff;
    color: #0c0c0c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
    border-color: #bfbfbf;
    border-width: 1px;
    border-style: solid;
}

    .icon-button:hover {
        background-color: #3367d6;
    }

.reset-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #e53935;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}

.search-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #504f79;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}




.reset-button:hover {
    background-color: #c62828;
}


.export-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #1B5E20;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}

    .export-button:hover {
        background-color: #2c8c47;
    }

.total-label {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #f1f3f4;
    border-left: 4px solid #4285f4;
    border-radius: 6px;
    font-size: 15px;
    color: #202124;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: fit-content;
}


.noUi-horizontal .noUi-tooltip {
    font-size: 12px !important;
}

input[type="date"].filter-control {
    min-width: 125px;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
}



.topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 3rem;
    display: block;
    float: left;
}

    .topnav a.icon {
        display: block;
        margin-left: 23px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
}


@media screen and (max-width: 600px) {
    #topnav2 {
        visibility: visible !important;
        position: absolute;
        top: -10px;
        right: 0px;
    }
}

@media screen and (max-width: 600px) {
    #profileR {
        margin-right: 70px;
    }
}


@media screen and (max-width: 600px) {
    #accordian2 {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #leftID, #minidashID, #navigareID, #activityID, #minidashcontID, #activityID, #Eksport {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 0px;
        width: 28%;
        display: none;
    }
}




@media screen and (max-width: 600px) {
    #buttonsID {
        margin-top: -50px;
        width: 100%;
    }
}



@media screen and (max-width: 600px) {
    #Top {
        margin-bottom: -112px;
    }
}



@media screen and (max-width: 600px) {
    #comm {
        visibility: visible !important;
    }
}


@media screen and (max-width: 600px) {
    #meteoid {
        height: 100px;
        visibility: hidden;
    }
}


@media screen and (max-width: 600px) {
    #filtersContID {
        height: auto !important;
    }
}

@media screen and (max-width: 600px) {
    #contContID {
        margin: 0px;
        margin-top: -30px;
    }
}

@media screen and (max-width: 600px) {
    #meteo, #hideB {
        visibility: hidden;
    }
}

@media screen and (max-width: 600px) {
    #profileID {
        margin-left: -31px;
        position: absolute;
        right: 0px;
        height: 60px;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #contID, #dashID {
        margin-left: -230px;
        margin-top: -40px !important;
        margin-right: -20px;
    }
}

@media screen and (max-width: 600px) {
    #buttonsID {
        margin-top: -20px;
    }
}

@media screen and (max-width: 600px) {
    #logoSlika {
        height: 60px !important;
    }
}

@media screen and (max-width: 600px) {
    #pretraga {
        margin-top: 74px;
    }
}



@media screen and (max-width: 600px) {
    #dashID {
        height: 150px;
    }
}
/* === 2026-05-03 acarter: import Modern.css overlay (modern UI on top of legacy structure) === */
@import url('Modern.css');

/* ========================================================================
   2026-05-09 acarter: enterprise-class GridView pager styling.
   Added per Anthony's "the pagination looks horrible" directive.
   Apply by setting PagerStyle-CssClass="cf-pager" on the GridView
   (or use the Web.config <pages><controls> mapping for a global default).
   Pairs with PagerSettings-Mode="NumericFirstLast" + PageButtonCount="7".
   ======================================================================== */
.cf-pager {
    background: transparent !important;
    color: #1e293b !important;
    font-size: 13px;
    padding: 14px 0 6px !important;
    border-top: 1px solid #cbd5e1 !important;
}
.cf-pager td { padding: 0 !important; text-align: right; }
.cf-pager table { display: inline-block; }
.cf-pager a, .cf-pager span {
    display: inline-block;
    min-width: 34px;
    padding: 7px 12px;
    margin: 0 3px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-decoration: none !important;
    color: #1e293b;
    background: #ffffff;
    font-weight: 600;
    line-height: 1.2;
    transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
    box-shadow: 0 1px 1px rgba(15,23,42,0.04);
}
.cf-pager a:hover {
    background: #1d3a5f;
    border-color: #1d3a5f;
    color: #ffffff !important;
    text-decoration: none !important;
}
.cf-pager span {
    /* current page indicator */
    background: linear-gradient(135deg, #1d3a5f 0%, #635bff 100%);
    border-color: #635bff;
    color: #ffffff;
    cursor: default;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(99,91,255,0.28);
}
/* 2026-05-12 acarter: nav arrows -- make first/prev/next/last symbols
   readable + consistent. ASP.NET GridView renders these as "<", "<<",
   ">", ">>" or unicode chevrons depending on PagerSettings.Mode; we
   normalize their visual weight here so prev/next matches forward/back. */
.cf-pager a[title^="First"],
.cf-pager a[title^="Last"],
.cf-pager a[title*="page"] {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #1d3a5f !important;
    background: #f8fafc !important;
}
.cf-pager a[title^="First"]:hover,
.cf-pager a[title^="Last"]:hover,
.cf-pager a[title*="page"]:hover {
    color: #ffffff !important;
    background: #1d3a5f !important;
    border-color: #1d3a5f !important;
}
@media (max-width: 480px) {
    .cf-pager a, .cf-pager span {
        min-width: 30px;
        padding: 6px 9px;
        font-size: 12px;
    }
}

/* 2026-05-12 acarter: GLOBAL pager polish for older grids that haven't
   adopted .cf-pager yet. Same intent (clear contrast, consistent prev/
   next) applied via :last-child :not() selectors. */
table[id*="GridView"] tr td[colspan][align="right"] a,
table[id*="GridView"] tr td[colspan][align="right"] span {
    display: inline-block !important;
    min-width: 32px !important;
    padding: 6px 11px !important;
    margin: 0 3px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    background: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 1px rgba(15,23,42,0.04) !important;
    transition: background 120ms, color 120ms, border-color 120ms !important;
}
table[id*="GridView"] tr td[colspan][align="right"] a:hover {
    background: #1d3a5f !important;
    color: #ffffff !important;
    border-color: #1d3a5f !important;
}
table[id*="GridView"] tr td[colspan][align="right"] span {
    background: linear-gradient(135deg,#1d3a5f 0%,#635bff 100%) !important;
    border-color: #635bff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(99,91,255,0.28) !important;
}

/* 2026-05-12 acarter: hide truly-empty data rows (all cells empty).
   Some data-bound grids leave placeholder padding rows that render as
   empty striped bands; this collapses them. Genuine "(no data)" lives
   in <EmptyDataTemplate> which is OUTSIDE the tbody. */
table[id*="GridView"] > tbody > tr.cf-empty-row,
table[id*="GridView"] > tbody > tr:has(> td:only-child:empty) {
    display: none !important;
}

/* ========================================================================
   2026-05-12 acarter: GLOBAL BREADCRUMBS (Common/Breadcrumbs.ascx)
   Drop-in via <cf:Breadcrumbs runat="server" />. Auto-derives the trail
   from URL via a catalog seeded from WaffleNav.MODULES. Tenant theme
   slot "B" drives the strip color via CSS custom properties.
   ======================================================================== */
.cf-crumbs {
    display: block;
    width: 100%;
    background: var(--cf-crumb-bg, rgba(20,31,45,0.04));
    border-bottom: 1px solid var(--cf-crumb-border, rgba(0,0,0,0.06));
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cf-crumb-fg, #4a5b6e);
}
.cf-crumbs ol {
    list-style: none; margin: 0; padding: 8px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.cf-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.cf-crumbs li + li::before {
    content: "\203A";
    color: var(--cf-crumb-sep, rgba(0,0,0,0.35));
    margin: 0 8px; font-weight: 400;
}
.cf-crumbs a {
    color: var(--cf-crumb-link, #1565c0);
    text-decoration: none;
    border-radius: 4px; padding: 2px 4px;
    transition: background 120ms, color 120ms;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-crumbs a:hover { background: rgba(21,101,192,0.08); color: #0d4a92; text-decoration:none; }
.cf-crumbs a:focus-visible { outline: 2px solid #1565c0; outline-offset: 1px; }
.cf-crumbs li[aria-current="page"] > span {
    color: var(--cf-crumb-current, #0f172a);
    font-weight: 600; padding: 2px 4px;
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-crumb-back { display: inline-block; margin-right: 4px; color: inherit; opacity: 0.7; font-weight: 400; }

/* Mobile: collapse intermediates to ellipsis */
@media (max-width: 600px) {
    .cf-crumbs ol { padding: 8px 12px; }
    .cf-crumbs li:not(:first-child):not(:last-child) { display: none; }
    .cf-crumbs li:nth-child(2)::after {
        content: "\2026";
        display: inline-flex; align-items: center;
        color: var(--cf-crumb-sep, rgba(0,0,0,0.35));
        margin: 0 8px;
    }
    .cf-crumbs li:last-child::before { content: ""; margin: 0; }
}

/* Dark-mode admin pages (KeyActions/ApiDocumentation/etc all use
   body { background:#0f172a }) -- light text on dark crumb strip. */
body[data-cf-theme="dark-admin"] .cf-crumbs {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
}
body[data-cf-theme="dark-admin"] .cf-crumbs a { color: #93c5fd; }
body[data-cf-theme="dark-admin"] .cf-crumbs li[aria-current="page"] > span { color: #f1f5f9; }

/* ========================================================================
   2026-05-12 acarter: ENTERPRISE LANDING POLISH
   Per Anthony's "this is the one page every user sees, has to be perfect,
   exceptional, and the best UI within the entire system" directive.
   Replaces the broken raster-image icons in the top bar (calendar.png,
   tasks.png, app1.png, approve.png, hmarker.png, hclock.png, etc.) with
   inline-SVG-driven enterprise components, and rebuilds the 6 broken
   homepage column images with CSS-only enterprise hero cards.
   ======================================================================== */

/* ---- Top action bar (right side: calendar / tasks / notifications / approvals) ---- */
.cf-act-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; padding: 8px 18px 8px 8px;
    flex-wrap: wrap;
}
.cf-act-item {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 11px;
    border-radius: 8px;
    color: rgba(255,255,255,0.78);
    text-decoration: none !important;
    font-size: 12px; font-weight: 500;
    border: 1px solid transparent;
    transition: background 140ms, color 140ms, border-color 140ms, transform 140ms;
    background: rgba(255,255,255,0.03);
}
.cf-act-item:hover {
    background: rgba(99,91,255,0.18);
    color: #ffffff;
    border-color: rgba(99,91,255,0.4);
    transform: translateY(-1px);
}
.cf-act-item .cf-act-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: inherit;
}
.cf-act-item .cf-act-text {
    font-size: 12px; letter-spacing: 0.1px;
}
.cf-act-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(220,38,38,0.4);
    border: 1.5px solid var(--cf-act-bar-bg, #141f2d);
}
@media (max-width: 980px) {
    .cf-act-item .cf-act-text { display: none; }
    .cf-act-item { padding: 8px; }
}

/* ---- Meteo / status bar (left side of header: company / location / clock / event) ---- */
.cf-meteo-bar {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.cf-meteo-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}
.cf-meteo-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}
.cf-meteo-chip svg {
    flex: none;
    color: rgba(165, 243, 252, 0.85);
}
.cf-meteo-chip span#ct {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
}
.cf-meteo-sep {
    color: rgba(255,255,255,0.22);
    padding: 0 4px;
}
.cf-meteo-brand {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* ---- Profile bar (top-right: name / role / avatar / dropdown caret) ----
   2026-05-13 acarter: bumped right-padding from 22px -> 88px so the
   waffle launcher (fixed at right:18px, ~40px wide + 12px padding) gets
   clear breathing room. Was crowding the avatar; now there's a clean
   gap between the profile group and the waffle icon. */
.cf-profile-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; padding: 10px 88px 10px 10px;
}
.cf-profile-meta {
    text-align: right; line-height: 1.2;
}
.cf-profile-name {
    color: #ffffff; font-size: 13px; font-weight: 600;
    letter-spacing: 0.1px;
}
.cf-profile-role {
    color: rgba(255,255,255,0.6);
    font-size: 11px; font-weight: 500;
    margin-top: 2px;
}
.cf-avatar, .cf-avatar-fallback {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.12);
    flex: none;
}
.cf-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    user-select: none;
}
.cf-profile-menu { position: relative; }
.cf-profile-caret {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.cf-profile-caret:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

/* ---- Total-stats banner (TOTAL CONTACTS / LEADS / TASKS / COMPANIES / DEALS VALUE) ---- */
/* The numbers sit under thin labels in a single row separated by hairline
   verticals. Anthony's screenshot showed the row with the right-side icons
   bleeding into the rightmost stat. Push them clear of the dashboard rail. */
.minidashCont .tooltip,
.minidashCont .cf-act-item,
.minidashCont .cf-act-bar { display: none !important; }
/* Make the numbers themselves crisp + larger weight */
.minidashCont p {
    color: rgba(255,255,255,0.95);
}
.minidashCont p:first-child {
    /* the small "TOTAL CONTACTS" label */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.65) !important;
    font-weight: 600 !important;
    font-size: 10pt !important;
}

/* ---- Engage1 column hero cards: replace homepage-*.png images ---- */
/* Anthony's screenshot shows the old gradient banners with broken white
   placeholder boxes. These rules turn .column > div:has(img) into a
   self-rendered enterprise hero with a proper SVG-style icon. Each
   .column gets its hero color from a data-attr we add inline. */
/* ========================================================================
   2026-05-13 acarter: HUB-GRADE CARD POLISH
   Anthony's directive: HubSpot-quality icons + complete UI polish on top
   of polish. The previous "filled-gradient badge" look was an upgrade
   from line drawings but still felt generic. This pass:
     - Lighter card surface (white) with soft tinted accent border
     - Header section uses a soft pastel WASH (15-20% accent) so the
       3D-rich illustrated SVG can pop against a clean background
     - Icon SVGs are now multi-layer 3D illustrations: shadow plate,
       main shape with linear+radial gradients, top-edge highlight,
       floating accent details (sparkles, badges, tiny chart marks)
     - Button system becomes a horizontal pill row with hover-fill
     - Card hover: lift + colored glow shadow matching the accent
     - Title + one-line description added for context
   ======================================================================== */

/* Per-card accent vars (HubSpot-inspired palette) */
.column[data-cf-card="company"]    {
    --cf-accent: #1565c0; --cf-accent-2: #0c4a6e;
    --cf-wash: rgba(96, 165, 250, .14); --cf-wash-2: rgba(21, 101, 192, .08);
    --cf-glow: rgba(21, 101, 192, .22);
}
.column[data-cf-card="comm"]       {
    --cf-accent: #0d9488; --cf-accent-2: #115e59;
    --cf-wash: rgba(94, 234, 212, .18); --cf-wash-2: rgba(13, 148, 136, .08);
    --cf-glow: rgba(13, 148, 136, .22);
}
.column[data-cf-card="employees"]  {
    --cf-accent: #7e22ce; --cf-accent-2: #581c87;
    --cf-wash: rgba(216, 180, 254, .20); --cf-wash-2: rgba(126, 34, 206, .08);
    --cf-glow: rgba(126, 34, 206, .22);
}
.column[data-cf-card="marketing"]  {
    --cf-accent: #f97316; --cf-accent-2: #c2410c;
    --cf-wash: rgba(254, 215, 170, .26); --cf-wash-2: rgba(249, 115, 22, .08);
    --cf-glow: rgba(249, 115, 22, .22);
}
.column[data-cf-card="inventory"]  {
    --cf-accent: #d97706; --cf-accent-2: #92400e;
    --cf-wash: rgba(253, 230, 138, .26); --cf-wash-2: rgba(217, 119, 6, .08);
    --cf-glow: rgba(217, 119, 6, .22);
}
.column[data-cf-card="crm"]        {
    --cf-accent: #4f46e5; --cf-accent-2: #312e81;
    --cf-wash: rgba(165, 180, 252, .18); --cf-wash-2: rgba(79, 70, 229, .08);
    --cf-glow: rgba(79, 70, 229, .22);
}

/* Card surface override (was: white card + grayblue border) */
.column[data-cf-card] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden;
    transition:
        transform 220ms cubic-bezier(.2,.7,.2,1),
        box-shadow 260ms cubic-bezier(.2,.7,.2,1),
        border-color 220ms;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
    min-height: 460px;
    display: flex; flex-direction: column;
}
.column[data-cf-card]:hover {
    transform: translateY(-6px);
    border-color: var(--cf-accent);
    box-shadow:
        0 10px 32px var(--cf-glow),
        0 4px 14px rgba(15,23,42,.10);
}

/* Hero / illustration area: soft pastel wash so the icon pops */
.column[data-cf-card] .cf-card-hero {
    width: 100%;
    height: 200px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    margin: 0;
    background:
        radial-gradient(ellipse at 30% 20%, var(--cf-wash) 0%, transparent 65%),
        radial-gradient(ellipse at 70% 80%, var(--cf-wash-2) 0%, transparent 70%),
        #fafbfc;
    color: var(--cf-accent);
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(229,231,235,.6);
}
/* Subtle dot-grid pattern for HubSpot-y texture */
.column[data-cf-card] .cf-card-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    opacity: .55;
    pointer-events: none; z-index: 0;
}
/* Hero highlight orb (top-left) */
.column[data-cf-card] .cf-card-hero::after {
    content: ""; position: absolute;
    width: 200px; height: 200px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, var(--cf-glow) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    filter: blur(8px);
}
/* The 3D illustration sits centered, large (148px), with depth shadow */
.column[data-cf-card] .cf-card-hero svg {
    width: 148px; height: 148px;
    filter: drop-shadow(0 12px 22px rgba(15,23,42,.18))
            drop-shadow(0 4px 8px rgba(15,23,42,.10));
    position: relative; z-index: 1;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.column[data-cf-card]:hover .cf-card-hero svg {
    transform: translateY(-4px) scale(1.04);
}

/* Body section: title + description + primary button + secondaries.
   2026-05-13 acarter (per Anthony): the PRIMARY button on every card
   must be at the SAME Y position across the row regardless of how many
   secondary buttons follow. Fixed-height title+desc+spacer block above
   the primary; secondaries stack BELOW the primary and extend the card
   downward. CSS grid equalizes card heights, so the empty space below
   secondaries on shorter cards stays at the bottom -- not interleaved. */
.column[data-cf-card] .cf-card-body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column;
    flex: 1;
}
.column[data-cf-card] .cf-card-title {
    position: static;
    text-align: left;
    color: #0f172a;
    font-size: 19px; font-weight: 700;
    letter-spacing: -.2px;
    text-shadow: none;
    margin: 0 0 6px;
    line-height: 1.25;
    min-height: 24px;
}
.column[data-cf-card] .cf-card-desc {
    color: #475569;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 24px;
    min-height: 40px;
}
/* Primary button slot: appears at the same Y across all cards because
   the title+desc+margins above are fixed-size. */
.column[data-cf-card] .cf-card-primary {
    margin: 0 0 8px;
}
/* Secondary buttons stack below primary; card grows to fit them. */
.column[data-cf-card] .cf-card-secondaries {
    display: flex; flex-direction: column; gap: 8px;
}
/* 2026-05-24 acarter: dedicated AI-Power row under the secondaries.
   Each hub card surfaces 1-3 most-on-topic AI features directly so
   operators don't need to open the waffle nav to find them. Uses
   plain <a class="mybtn"> anchors (no asp:Button) to avoid designer
   churn + compile risk. The "AI POWER" mini-label visually segments
   the row so the link list reads as "your tools" vs "your AI tools." */
.column[data-cf-card] .cf-card-ai-row {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.column[data-cf-card] .cf-card-ai-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-accent, #6366f1);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.column[data-cf-card] .cf-card-ai-label::before {
    content: "✨";
    font-size: 12px;
}
.column[data-cf-card] .cf-card-ai-row a.mybtn {
    text-decoration: none !important;
    /* 2026-05-24 Anthony feedback: AI Power button text must be left-aligned
       and fit cleanly within the button outline. The base .column .mybtn rule
       already sets text-align:left + padding:11px 16px, but anchors needed
       explicit overrides because the legacy global `.mybtn` rule (with
       text-align:center) was winning specificity against unscoped <a>. */
    text-align: left !important;
    /* Keep the right-edge arrow (::after) from colliding with the label */
    padding-right: 36px !important;
    /* Let long labels wrap rather than overflow */
    white-space: normal !important;
    line-height: 1.35 !important;
    /* Ensure anchor takes the full pill width, matching the asp:Button siblings */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Legacy: keep .cf-card-actions as a no-op wrapper so existing pages
   that haven't been split into primary/secondaries still render. */
.column[data-cf-card] .cf-card-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: auto;
}

/* Button system: pill cards with hover-fill in the card's accent color.
   Wins via specificity over the legacy .mybtn rules. */
.column[data-cf-card] .mybtn,
.column[data-cf-card] input[type="submit"].mybtn,
.column[data-cf-card] input.mybtn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 11px 16px !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    cursor: pointer !important;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 140ms cubic-bezier(.2,.7,.2,1),
        box-shadow 200ms ease !important;
    text-align: left !important;
    letter-spacing: -.1px !important;
    position: relative !important;
}
.column[data-cf-card] .mybtn::after {
    /* arrow at the right edge, fades in on hover */
    content: "→";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    color: #ffffff;
    font-size: 14px;
    transition: opacity 160ms, transform 200ms;
}
.column[data-cf-card] .mybtn:hover,
.column[data-cf-card] input[type="submit"].mybtn:hover {
    background: var(--cf-accent) !important;
    background-color: var(--cf-accent) !important;
    color: #ffffff !important;
    border-color: var(--cf-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px var(--cf-glow) !important;
}
.column[data-cf-card] .mybtn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Primary button = subtly emphasized.
   Matches both .cf-card-primary .mybtn (new structure) and
   .cf-card-actions .mybtn:first-child (legacy fallback). */
.column[data-cf-card] .cf-card-primary .mybtn,
.column[data-cf-card] .cf-card-actions .mybtn:first-child {
    background:
        linear-gradient(180deg, var(--cf-wash) 0%, transparent 100%),
        #ffffff !important;
    border-color: var(--cf-accent) !important;
    color: var(--cf-accent-2) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.column[data-cf-card] .cf-card-primary .mybtn:hover,
.column[data-cf-card] .cf-card-actions .mybtn:first-child:hover {
    background: var(--cf-accent) !important;
    color: #ffffff !important;
}

/* When the legacy <img> is still in the DOM, hide it so the hero block
   above takes over. Pages that use the new markup won't render an <img>
   inside .column at all. */
.column .cf-card-hero ~ img { display: none !important; }

/* ---- Enterprise button system: replace the inline BackColor="Green"/Red/Orange ---- */
/* Anthony's screenshot shows hard "Green / Red / #FF3300" buttons. Override
   them globally on landing pages so they render as a clean enterprise stack
   without per-button edits. The original BackColor inline style still wins
   if a page MUST keep it; everything goes through CSS specificity. */
.column .mybtn,
.column input[type="submit"].mybtn {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 200px !important;
    margin: 5px auto !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important;
    cursor: pointer !important;
    transition: background 140ms, color 140ms, border-color 140ms, transform 140ms !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.column .mybtn:hover,
.column input[type="submit"].mybtn:hover {
    background: linear-gradient(135deg,#1d3a5f,#635bff) !important;
    color: #ffffff !important;
    border-color: #635bff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(99,91,255,0.18) !important;
}
/* Make the legacy "Add" buttons read as primary actions vs the read-only
   ones; achieved by tagging in markup with class="cf-action-add" / "cf-action-edit"
   if/when a page wants to differentiate. Default style above is neutral
   so nothing looks broken before that tagging happens. */

/* ========================================================================
   2026-05-09 acarter: enterprise-class filter bar + active-filter chips.
   Per Anthony's "filters need to look enterprise class" directive.
   Pair with parameterized SQL on the back end (no concat of filter
   values into SQL strings -- see HACCP/Leads/Royalty fixes in the
   same audit batch).
   ======================================================================== */
.cf-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px; margin: 0 0 14px;
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-filter-bar .cf-filter-label { color: #475467; margin-right: 4px; }
.cf-filter-bar select,
.cf-filter-bar input[type="text"],
.cf-filter-bar input[type="search"],
.cf-filter-bar input[type="date"] {
    height: 32px; padding: 0 10px;
    border: 1px solid #d0d5dd; border-radius: 6px;
    background: #fff; color: #101828;
    font: inherit; min-width: 140px;
    transition: border-color .15s, box-shadow .15s;
}
.cf-filter-bar select:focus,
.cf-filter-bar input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.cf-filter-bar .cf-filter-divider { height: 24px; width: 1px; background: #e4e7ec; margin: 0 4px; }
.cf-filter-bar .cf-filter-spacer  { flex: 1; }

.cf-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cf-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 6px 0 10px;
    background: #eef2ff; color: #3730a3;
    border: 1px solid #c7d2fe; border-radius: 999px;
    font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-filter-chip .cf-chip-key { color: #6366f1; font-weight: 600; }
.cf-filter-chip .cf-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: transparent; color: #3730a3; cursor: pointer;
    border: none; font-size: 14px; line-height: 1;
}
.cf-filter-chip .cf-chip-x:hover { background: #c7d2fe; }

.cf-btn { height: 32px; padding: 0 12px; border-radius: 6px;
          border: 1px solid transparent; cursor: pointer;
          font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          display: inline-flex; align-items: center; gap: 6px; }
.cf-btn-primary       { background: #4f46e5; color: #fff; }
.cf-btn-primary:hover { background: #4338ca; }
.cf-btn-ghost         { background: #fff; color: #475467; border-color: #d0d5dd; }
.cf-btn-ghost:hover   { background: #f9fafb; color: #101828; }
.cf-btn-danger-ghost  { background: #fff; color: #b42318; border-color: #fda29b; }
.cf-btn-danger-ghost:hover { background: #fef3f2; }

/* ========================================================================
   2026-05-09 acarter: enterprise form-section card with affinity tints.
   Per Anthony's "I like the colored-section concept; expand it but keep
   enterprise quality" directive. The 5 affinity classes are semantic --
   pick the one that matches your section's content type.
   Pages that already do colored sections inline (Contact_New,
   employees_new, accounts_New, etc.) can migrate to these classes for
   consistency; new forms should use these from the start.
   ======================================================================== */
.cf-form-shell {
    max-width: 1400px; margin: 0 auto; padding: 24px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-form-title    { font-size: 22px; font-weight: 700; color: #111827; letter-spacing: -.01em; margin: 0 0 6px; }
.cf-form-subtitle { font-size: 14px; color: #6b7280; margin: 0 0 24px; }

.cf-form-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.cf-form-section {
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cf-form-section h2 {
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: #374151; margin: 0 0 16px;
    padding-bottom: 10px; border-bottom: 1px solid #f3f4f6;
}
/* Affinity tints -- WCAG-AA contrast against #111827 body text */
.cf-form-section.cf-affinity-identity  { background: #f5f8ff; border-color: #dce6fb; } /* indigo  - who/what */
.cf-form-section.cf-affinity-contact   { background: #f0faf4; border-color: #cce9d6; } /* mint    - contact/address */
.cf-form-section.cf-affinity-financial { background: #fff8ec; border-color: #f5e2b8; } /* amber   - money/billing */
.cf-form-section.cf-affinity-relations { background: #fbf1f4; border-color: #f3d7df; } /* rose    - tags/owners/relations */
.cf-form-section.cf-affinity-system    { background: #f4f6f8; border-color: #e0e6ee; } /* slate   - IDs/audit/system */

.cf-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cf-form-row label { font-size: 13px; font-weight: 600; color: #374151; }
.cf-form-row input[type=text],
.cf-form-row input[type=email],
.cf-form-row input[type=tel],
.cf-form-row input[type=date],
.cf-form-row input[type=number],
.cf-form-row input[type=password],
.cf-form-row textarea,
.cf-form-row select {
    width: 100%; padding: 9px 12px;
    font-size: 14px; box-sizing: border-box;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.cf-form-row input:focus, .cf-form-row textarea:focus, .cf-form-row select:focus {
    outline: none; border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.cf-form-row .cf-help { font-size: 12px; color: #6b7280; }

.cf-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cf-form-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 720px) {
    .cf-form-grid  { grid-template-columns: 1fr; gap: 12px; }
    .cf-form-section { padding: 16px 16px; }
    .cf-form-row-2 { grid-template-columns: 1fr; }
}

/* ========================================================================
 * 2026-05-10 acarter: filter-bar system-wide modernization (Phase 1+3).
 *
 * Filter-bar audit found 237 unique filter-bearing pages across two
 * structurally-distinct families. Rather than refactor 200+ .aspx
 * files to use `class="cf-filter-bar"`, override the existing wrapper
 * classes so EVERY filter row gets the modern look automatically.
 *
 * Family 1: Legacy Pretraga (186 pages)
 *   <div id="filtersContID" class="filtersCont">
 *     <asp:Button "All" /><asp:Button "My" />
 *     <asp:DropDownList ... />
 *     <div class="Pretraga"><asp:TextBox /></div>
 *   </div>
 *
 *   We override .filtersCont (was 50px white card with gray bottom
 *   border, dated) to look like the cf-filter-bar palette: flex row
 *   with auto-height, soft border, light shadow. Inputs get the same
 *   32px height + rounded corners + indigo focus ring as cf-filter-bar.
 *
 * Family 2: Scaffolded filter-bar / filter-group (46 pages)
 *   <div class="filter-bar">
 *     <div class="filter-group"><label>X</label><select|input/></div>
 *     ...
 *   </div>
 *
 *   We override .filter-bar to align with cf-filter-bar styling
 *   (smaller padding, less aggressive gap), and tighten .filter-group
 *   labels.
 *
 * Net effect: 232 of 237 filter-bearing pages get the modern look
 * with ZERO .aspx file edits. The remaining ~5 Tier-C pages have
 * custom filter UI that needs per-page work (deferred).
 *
 * Key design choice: !important on color + border + radius so the
 * existing inline styles on .filtersCont (background-color:white,
 * border-bottom:gray) get overridden. !important is normally a
 * smell, but here it's the right tool -- we WANT to win against
 * pre-existing rules without rewriting 232 pages.
 */
.filtersCont,
.filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin: 0 0 14px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    /* Override the legacy fixed 50px height and bottom-border */
    height: auto !important;
    border-bottom-style: none !important;
}

/* Style child controls in the filter row -- match cf-filter-bar look.
   Selectors are scoped to .filtersCont/.filter-bar so we don't
   accidentally restyle every <select>/<input> on the page. */
.filtersCont select,
.filtersCont input[type="text"],
.filtersCont input[type="search"],
.filtersCont input[type="date"],
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"],
.filter-bar input[type="date"] {
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #101828 !important;
    font: inherit !important;
    min-width: 140px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.filtersCont select:focus,
.filtersCont input:focus,
.filter-bar select:focus,
.filter-bar input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}

/* Buttons inside the filter row should match -- compact, rounded,
   no oversize legacy padding. */
.filtersCont input[type="submit"],
.filtersCont .mybtn,
.filter-bar input[type="submit"],
.filter-bar .mybtn {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Pretraga (Serbian "Search") -- the old float:right hack breaks
   the new flex layout. Replace with margin-left:auto so the search
   box sits flush right within the flex row. */
.Pretraga {
    float: none !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Eksport (Serbian "Export") -- same float fix */
.Eksport {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* .filter-group (used in 46 scaffolded pages) -- tighten the
   stacked label/input layout. */
.filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 120px !important;
}
.filter-group label {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Mobile: filter rows should stack vertically with full-width
   inputs so they don't overflow on small screens. */
@media (max-width: 720px) {
    .filtersCont, .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
    }
    .filtersCont select,
    .filtersCont input[type="text"],
    .filtersCont input[type="search"],
    .filter-bar select,
    .filter-bar input[type="text"],
    .filter-bar input[type="search"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    .Pretraga, .Eksport {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
 * 2026-05-10 acarter: Sweep 7 -- modernize 469 GridView styles app-wide.
 *
 * Background: 469 .aspx files have inline grid styles using the dated
 * VS WebForms scaffolding palette ("Material green" 2007-era):
 *   HeaderStyle BackColor="#236526"  (dark green)
 *   FooterStyle BackColor="#1C5E55"  (dark teal)
 *   EditRowStyle BackColor="#7C6F57" (tan / brown)
 *   PagerStyle  BackColor="#3D8B40"  (medium green)
 *
 * Touching 469 files individually is too risky for the value. Instead,
 * we let the inline ASP.NET-generated styles be overridden by these
 * CSS rules with !important. Inline style attributes from <HeaderStyle/>
 * etc. render as inline `style=""` attrs on the <th>/<tr>/<td> -- our
 * CSS rules below match the generated <table class="..."> children and
 * win via !important.
 *
 * Result: every standard GridView gets a clean neutral look with no
 * per-page edits. Pages with the cf-pager class on PagerStyle (the
 * newer pages) keep their existing custom pager styling.
 *
 * Targets the following deprecated palette:
 *   #236526 / #3D8B40 / #1C5E55 / #7C6F57
 */
.GridView,
form table.GridView,
table[id*="GridView"] {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    font-size: 13px !important;
}

/* Header row: dark teal/tan -> neutral light slate */
table[id*="GridView"] th,
table[id*="GridView"] tr.header,
table[id*="GridView"] tr:first-child td[align="center"][colspan],
form table[id*="GridView"] > tbody > tr:first-child > th,
form table[id*="GridView"] > thead > tr > th {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 10px 12px !important;
}

/* Footer row: dark teal -> very light slate */
table[id*="GridView"] tr.footer,
table[id*="GridView"] > tbody > tr:last-child:not(.cf-pager) {
    background-color: #f9fafb !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Edit row: tan/brown -> soft amber-50 (still distinct enough to see edit mode) */
table[id*="GridView"] tr.edit,
table[id*="GridView"] tr[style*="#7C6F57"],
table[id*="GridView"] tr[style*="#7c6f57"] {
    background-color: #fffbeb !important;
    color: #422006 !important;
}

/* Pager row: medium green -> neutral. The newer .cf-pager class
   handles its own styling; this is for pages that haven't adopted it. */
table[id*="GridView"] tr[align="right"]:last-child:not(.cf-pager) td,
table[id*="GridView"] tr td[colspan][align="right"] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Selected row: light blue accent (replaces the dated #C5BBAF) */
table[id*="GridView"] tr.selected,
table[id*="GridView"] tr[style*="#C5BBAF"],
table[id*="GridView"] tr[style*="#c5bbaf"] {
    background-color: #dbeafe !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Alternating row striping if the page didn't define one */
table[id*="GridView"] > tbody > tr:nth-child(even):not(.header):not(.footer):not(.edit):not(.selected) {
    background-color: #fafbfc;
}

/* Direct override of any inline style="background-color:#236526..." style="..." from the grid header generator */
table[id*="GridView"] [style*="background-color:#236526"],
table[id*="GridView"] [style*="background-color:#236526;"],
table[id*="GridView"] [style*="background-color: #236526"],
table[id*="GridView"] [style*="#236526"] {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
table[id*="GridView"] [style*="background-color:#1C5E55"],
table[id*="GridView"] [style*="#1C5E55"],
table[id*="GridView"] [style*="#1c5e55"] {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    color: #475569 !important;
}
table[id*="GridView"] [style*="background-color:#3D8B40"],
table[id*="GridView"] [style*="#3D8B40"],
table[id*="GridView"] [style*="#3d8b40"] {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #475569 !important;
}

/* ========================================================================
 * 2026-05-25 acarter: form-control sizing NORMALIZE
 * --------------------------------------------------------------------
 * Anthony 2026-05-25 walk-through:
 *   "Many selection boxes across places are not proportional, aligned
 *    with the same size and type, and text placement so you can see
 *    it within the constraints of the button... I have seen this
 *    mostly in drop down selection menus but I would not assume that
 *    those are the only buttons that are impacted."
 *
 * AUDIT (Scripts/audit-control-sizing.py, 2026-05-25):
 *   .mytxt  -- defined in 4 CSS files (Styles, Modern, POSStyles,
 *              cf-ai-polish) with conflicting padding/height/font.
 *   .mybtn  -- defined in 6 CSS files; same problem at larger scale.
 *   1,004 of 1,297 dropdowns have inline Height/Width attributes
 *     that override CSS by specificity unless !important is used.
 *   100 dropdowns have NO class at all (browser-default sizing).
 *   13 raw <select> tags (mostly no class).
 *
 * THIS BLOCK does TWO things:
 *   (1) Normalize every <select> to a consistent geometry +
 *       cross-browser-identical arrow (custom inline SVG, eliminates
 *       Chrome/Firefox/Safari native arrow variance), regardless of
 *       which .mytxt / .filter-control / no-class variant won.
 *   (2) Force button text to render INSIDE the button geometry
 *       (line-height + white-space + overflow), without touching the
 *       background/color/border that lives per-CSS-file by design.
 *
 * SPECIFICITY: tag+class selectors (0,1,1) win over plain .mytxt
 *   (0,1,0) on tie-break-by-load-order. AI pages with #col1 .mytxt
 *   (1,0,1) still win locally -- those pages were already styled
 *   independently by intent.
 *
 * NOT TOUCHED:
 *   - Page-level inline Width="" attrs (preserve horizontal layout)
 *   - Button background/border/color (design intent per page family)
 *   - #col1 / #col2 AI page overrides (id-scoped, intentional)
 * ======================================================================== */

/* ── SELECT NORMALIZE ─────────────────────────────────────────────
   Matches every flavour: tagged <select>, .mytxt-classed, .filter-
   control, .cf-select, .cf-input, and the "no-class" 100. */
select,
select.mytxt,
select.filter-control,
select.cf-select,
select.cf-input,
select.textbox,
select.modern-dropdown,
select[class*="auto-style"] {
    /* Geometry: consistent floor; inline Height="" inline-style attrs
       are overridden because !important on a (0,1,1) selector beats
       a non-!important style="" (specificity 1000 but no !important). */
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding: 6px 32px 6px 12px !important;   /* 32px right makes room for arrow */
    vertical-align: middle !important;

    /* Typography -- one canonical look across all browsers */
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1f2937 !important;

    /* Border + radius */
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;

    /* Custom arrow: inline SVG chevron in the reserved right padding.
       Removes browser-native arrow variance (Chrome/Firefox/Safari/Edge
       all render the default arrow differently and steal text padding). */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23475467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
}
/* IE/legacy Edge native expand arrow */
select::-ms-expand { display: none !important; }

select:focus,
select.mytxt:focus,
select.filter-control:focus,
select.cf-select:focus,
select.cf-input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

/* Disabled selects -- preserve dimming but keep geometry consistent */
select:disabled,
select[disabled],
select.aspNetDisabled {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* ── BUTTON TEXT-FIT NORMALIZE ────────────────────────────────────
   Three pages of complaints reduce to one rule: text MUST render
   inside the button's visible geometry. Wins by tag+class specificity
   over the 6 conflicting .mybtn definitions. We deliberately do NOT
   override background / border / color / padding / height -- those
   live per-CSS-file by design intent (POS vs AI vs storefront vs
   purchase). We ONLY enforce:
     - line-height 1.4 (no clipping on tall content)
     - white-space nowrap (no mid-word wrap that ate the button)
     - middle-vertical-align (icon + text co-baseline)
     - text-rendering geometry that fits the inline-flex container. */
.mybtn,
input.mybtn,
button.mybtn,
a.mybtn,
.cf-btn,
button.cf-btn,
a.cf-btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
button:not([class*="dropbtn"]):not(.ka-copy):not(.digit):not(.close) {
    line-height: 1.4 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* No text-overflow ellipsis intentionally: a clipped label is worse
       than a slightly oversized button. White-space:nowrap alone keeps
       the label readable; if a designer needs ellipsis they can opt in. */
}

/* End form-control sizing normalize ===================================== */