.calculator {
    max-width: 960px;
    margin: 0 auto;
    background-color: #405cf50d;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(64, 92, 245, 0.2);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    border: 1px solid #405cf559;
}

.calculator h2 {
    text-align: center;
    margin: 0 0 10px 0;
}

.calculator .element {
    padding: 10px;
    box-sizing: border-box;
}


.calculator .element label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}

.fset-w-100 input 
{
    width: 100% !important;
}


.fset-inline {
    display: inline-block;

}

.fset-block {
    display: block;

}


.fset-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}

.fset-div {
    padding: 10px;
    box-sizing: border-box;
}

.fset-1 {
    grid-column: span 1;
}

.fset-2 {
    grid-column: span 2;
}

.fset-3 {
    grid-column: span 3;
}

.fset-4 {
    grid-column: span 4;
}

.fset-5 {
    grid-column: span 5;
}

.fset-6 {
    grid-column: span 6;
}

.fset-7 {
    grid-column: span 7;
}

.fset-8 {
    grid-column: span 8;
}

.fset-9 {
    grid-column: span 9;
}

.fset-10 {
    grid-column: span 10;
}

.fset-11 {
    grid-column: span 11;
}

.fset-12 {
    grid-column: span 12;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 576px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}



.calculator input[type="number"],
.calculator input[type="text"],
.calculator select {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #405cf5;
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    font-weight: 500;
}


.calculator input[type="date"] {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #405cf5;
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    font-weight: 500;
}

.calculator input[type="time"], .calculator input[type="datetime-local"]  {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #405cf5;
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    font-weight: 500;
}



.calculator .result {
    margin: 0 20px 20px 20px;
    padding: 20px 10px;
    font-size: 18px;
    border: 2px dashed #ffb448;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(245, 212, 64, 0.2);
    text-align: center;
}

.result h5 
{
    color: #405cf5;
    font-weight: 600;
    font-size: 20px;
    margin: 5px;
}

.calculator .result h6 {
   text-align: center;
   margin: 0;
   padding: 0;
   color: #405cf5;
   font-weight: 600;
   font-size: 20px;
}

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #405cf5;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    display: none;
}

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

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




.button-1 {
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", "Liberation Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 8px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

.button-1:hover,
.button-1:focus {
    background-color: #b3d3ea;
    color: #2c5777;
}

.button-1:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.button-1:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: #2c5777;
}



.button-2 {
    appearance: button;
    backface-visibility: hidden;
    background-color: #405cf5 !important;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .1) 0 2px 5px 0, rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
    font-size: 100%;
    height: 44px;
    line-height: 1.15;
    margin: 12px 0 0;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-transform: none;
    transform: translateZ(0);
    transition: all .2s, box-shadow .08s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    max-width: 200px;
}

.button-2:disabled {
    cursor: default;
}

.button-2:focus {
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}


.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.custom-select {
    position: relative;
    overflow: hidden;
}

.custom-select select {
    color: #000;
    padding: 12px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.custom-select select::after {
    content: "\25BC";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}


.custom-select::before {
    content: "";
    position: absolute;
    top: 65%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #405cf5;
    pointer-events: none;
    border-radius: 7px;
}





.box select option {
    padding: 30px;
}

.cal_head p {
    margin: 0px;
    font-size: 16px;
}

.cal_head b {
    display: block;
    font-size: 22px;
    font-weight: 600;
}

.cal_head {
    margin: 0px 0px 10px 0px;
    padding: 30px 15px;
    background-color: #405cf5;
    color: #ffffffe3;
    overflow: hidden;
    background-image: url('/cal-assets/img/time-calculator.png');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: right;
    border-top: 2px solid #020412;
    border-right: 2px solid #020412;
    border-left: 2px solid #020412;
    border-bottom: 3px solid #ffffffe3;
    border-radius: 5px 5px 0 0;

}

.fin_head p {
    margin: 0px;
    font-size: 16px;
    max-width: 80%;
}

.fin_head b {
    display: block;
    font-size: 22px;
    font-weight: 600;
}

.fin_head {
    margin: 0px 0px 10px 0px;
    padding: 45px 15px;
    background-color: #405cf5;
    color: #ffffffe3;
    overflow: hidden;
    background-image: url('/cal-assets/img/finance-calculator.png');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: right;
    border-top: 2px solid #020412;
    border-right: 2px solid #020412;
    border-left: 2px solid #020412;
    border-bottom: 3px solid #ffffffe3;
    border-radius: 5px 5px 0 0;

}


#calculatorForm {
    padding: 0 20px 20px 20px;
}


.calculator {
    margin: 0 auto;
}

.calculator .work_entries {
    margin-bottom: 10px;
}

.calculator button {
    margin-bottom: 10px;
}

.calculator .fset-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fbfbfb;
  
}

.calculator .fset-table table,
.calculator .fset-table th,
.calculator .fset-table td {
    border: none;
}

.calculator .fset-table .fset-table-container 
{
    border-radius: 4px;
    overflow: hidden;
    padding: 2px;
    background-color: #405cf5;
}


.calculator .fset-table th {
    background-color: #405cf5;
    color: white;
    padding: 10px 8px !important ;
    text-align: left;
}

.calculator .fset-table td {
    padding: 8px;
    text-align: left;
}


.fset-table input[type="time"] {
    width: 90%;
    padding: 5px 8px !important;
    font-size: 14px !important;
    
}

.fset-table input[type="text"] {
    width: 90% !important;
    padding: 5px 8px !important;
    font-size: 14px !important;
    border: 1px solid #405cf5;
    border-radius: 5px !important;
    box-sizing: border-box;
    color: #000;
    font-weight: 500;
    
}

.fset_table_time tr th:nth-chid(0)
{
    width: 20%;

}

.fset-table_time tr th:nth-chid(1)
{
    width: 25%;

}

.fset-table_time tr th:nth-chid(2)
{
    width: 25%;

}

.fset-table_time tr th:nth-chid(3)
{
    width: 25%;

}




.calculator #time_card_report {
    margin-top: 20px;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}


.am_pm input[type=time]::-webkit-datetime-edit-ampm-field {
   display: none;
 }
 .am_pm input[type=time]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   -ms-appearance:none;
   appearance: none;
   margin: -10px; 
 }


 .error_note {
    color: red;
    font-size: 12px;
    margin-top: 5px;
 }

 
 .custom_sharing 
 {
    border-top:2px solid #f7b924 !important;
    padding: 15px;
    margin: 20px 0 10px 0;
    border: 1px solid #f7b924;
    box-shadow: 0 0 10px rgba(247, 185, 36, 0.2);
    background-color: #f7b9240d;
    border-radius: 5px;
 }

 .custom_embedding 
 {
    border-top:2px solid #405cf5 !important;
    padding: 15px;
    margin: 20px 0 10px 0;
    border: 1px solid #405cf5;
    box-shadow: 0 0 10px rgba(64, 92, 245, 0.2);
    background-color: #405cf50d; ;
    border-radius: 5px;
 }


 .cs_link_head b
 {
    font-weight: 600;
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
 }



.cs_link_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border:1px solid #405cf5;
    border-radius: 5px;
    overflow: hidden;

}

.cs_link_input input[type="url"] {
    width: 85% !important;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    font-weight: 500;
    border: none;
    outline: none;
    background-color: #fff !important;
}

.cs_link_input button {
    margin-top: 0;
    background-color: #405cf5;
    width: 15% !important;
    box-sizing: border-box;
}

.calculator p:empty
{
    display: none !important;
}

.calculator br
{
    display: none !important;
}

.embedding_input textarea
{
    font-size: 14px;
    border:0px !important;
    outline: none !important;
    background-color: #020412;
    color: #63e419;
    padding: 15px !important;
    border-radius: 12px;
}

.embedding_input textarea::placeholder
{
    color: #63e419;
}

.data_li 
{
    margin: 0px !important;
    padding: 0px !important;
}

.data_li li
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    /* background: #405cf50d;
    border: 1px solid #405cf559; */
    border-radius: 6px;
    /* box-shadow: 0 0 10px rgba(64, 92, 245, 0.2); */
    color: #405cf5;
}

.block {
    display: block;
}

.data_li li .data_block
{
    color: #2a2a2a;
    display: block;
    background: #ffb34633;
    margin: 5px;
    border-radius: 6px;
}

.fw-600 {
    font-weight: 600;
}


.christmas 
{
    background-image: url('/cal-assets/img/christmas.jpg');
    background-size: cover;
   
    
}

.easter 
{
    background-image: url('/cal-assets/img/easter.jpg');
    background-size: cover;
}

.halloween 
{
    background-image: url('/cal-assets/img/halloween.jpg');
    background-size: cover;
}


.independence 
{
    background-image: url('/cal-assets/img/independence.jpg');
    background-size: cover;
}

.newyear 
{
    background-image: url('/cal-assets/img/newyear.jpg');
    background-size: cover;
    background-position: right;
}

.thanksgiving 
{
    background-image: url('/cal-assets/img/thanksgiving.jpg');
    background-size: cover;
}

.newyear #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}

.independence #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}


.halloween #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}

.thanksgiving #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}

.newyear #result h5 
{
    color: #4c1bad;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}

.independence #result h5 
{
    color: #0400ff !important;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}

.thanksgiving #result h5 
{
    color: #ff6b00 !important;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}

.easter #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}

.christmas #result 
{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 50px;
    border-radius: 12px;
    border:1px solid #fbfbfb59;

}


.halloween #result h5 
{
    color: #fff !important;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}

.christmas #result h5 
{
    color: #378b29;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}

.easter #result h5 
{
    color: #333;
    font-weight: 600;
    font-size: 24px;
    margin: 5px;
   
}
.result.christmas 
{
    border: 0px dashed #378b29 !important;
}

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

.christmas_ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #378b29;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(13, 118, 41, 0.2);
    color: #fff;

}

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

.easter_ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #ffb346;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(245, 179, 70, 0.2);
    color: #333;

}

.halloween ul 
{
    margin: 0px;
    padding: 0px;
}

.halloween ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #333;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #fff;

}

.independence ul 
{
    margin: 0px;
    padding: 0px;
}

.independence ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #405cf5;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(64, 92, 245, 0.2);
    color: #fff;

}

.newyear ul 
{
    margin: 0px;
    padding: 0px;
}

.newyear ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #15c0e7;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(64, 92, 245, 0.2);
    color: #fff;

}


.thanksgiving ul 
{
    margin: 0px;
    padding: 0px;
}

.thanksgiving ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #ff6b00;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.2);
    color: #fff;

}

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

.data_ul li 
{
    display: inline-block;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    width: auto;
    background-color: #405cf5;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(64, 92, 245, 0.2);
    color: #fff;

}

.mt-10 {
    margin-top: 10px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}


.div-3 {
    width: 30% !important;
    padding: 10px 5px;
    box-sizing: border-box;
    display: inline-block !important;
    vertical-align: top;
}

.div-4 {
    width: 40% !important;
    padding: 10px 5px;
    box-sizing: border-box;
    display: inline-block !important;
    vertical-align: top;
}

.div-5 {
    width: 50% !important;
    padding: 10px 5px;
    box-sizing: border-box;
    display: inline-block !important;
    vertical-align: top;
}




/* New Grid System with flexible column control */
.new-grid-container {
    display: grid;
    grid-gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Column classes for controlling layout */
.col-1 {
    grid-column: span 12; /* Full width */
}

.col-2 {
    grid-column: span 6; /* 50% width */
}

.col-3 {
    grid-column: span 4; /* 33.33% width */
}

.col-4 {
    grid-column: span 3; /* 25% width */
}

/* Custom width layouts */
.col-40-60 {
    grid-template-columns: 40% 60%; /* 40% - 60% layout */
}

.col-60-40 {
    grid-template-columns: 60% 40%; /* 60% - 40% layout */
}

.col-70-30 {
    grid-template-columns: 70% 30%; /* 70% - 30% layout */
}

.col-30-70 {
    grid-template-columns: 30% 70%; /* 30% - 70% layout */
}

/* Ensure input fields are 100% within their grid column */
.new-grid-container input {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .col-2, .col-3, .col-4 {
        grid-column: span 12; /* Full width on smaller screens */
    }
}


.inline-fix {
    display: inline-block !important;
    box-sizing: border-box;
    
}

.inline-fix.i10 {
    width: 10% !important;
}


.inline-fix.i40 {
    width: 35% !important;
}

.inline-fix.i50 {
    width: 50% !important;
}

.inline-fix.i60 {
    width: 55% !important;
}

.inline-fix.i70 {
    width: 70% !important;
}

.inline-fix.i80 {
    width: 80% !important;
}

.inline-fix.i90 {
    width: 90% !important;
}

.inline-fix.i100 {
    width: 100% !important;
}