/* ==========================================================================
   Job circular DETAIL page (includes/layouts/govjobcircular.php).
   These classes are exclusive to that template (verified via grep — not
   shared with the sidebar/listing widgets further below in this file), so
   they're safe to redesign as a self-contained modern card. Kept float
   instead of switching the shared container to flex/grid, since
   .jobcircularholder sits inside a wider float-based page layout controlled
   elsewhere. */
.jobcircularholder{
    display: block;
    float: left;
    width: 100%;
    position: relative;
    background-color: transparent;
}
.jc-card{
    display: block;
    float: left;
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(17,24,39,.08), 0 6px 16px rgba(17,24,39,.06);
    box-sizing: border-box;
}
.jobcirculardataholder{
    display: block;
    float: left;
    position: relative;
    width: calc(100% - 10px);
    margin-left: 10px;
}
.circularstardeadlineholder{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    float: left;
    position: relative;
    width: 100%;
    margin: 10px 0 4px;
}
.applystartenddate{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    color: #333;
    font-size: 13px;
    background-color: #f3f4f6;
    border-radius: 999px;
}
.startenddate{
    font-weight: bold;
    margin-right: 4px;
}
.enddate{
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-radius: 999px;
}
.enddate .startenddate{ color: #fff; }
.postnameholder{
    display: block;
    float: left;
    position: relative;
    width: 100%;
}
.applybuttonholder{
    display: block;
    float: left;
    position: relative;
    width: calc(100% - 20px);
    margin: 16px 10px 6px 10px;
}
.applybutton{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 42px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(37,99,235,.28);
    transition: transform .15s ease;
}
.applybuttonholder a:hover .applybutton{
    transform: translateY(-2px);
}
.applytext{
    color: #fff;
}
.postnametext{
    display: block;
    float: left;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    width: calc(100% - 10px);
    color: #111827;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    padding: 1px 5px 6px 5px;
    border-bottom: 1px solid #f3f4f6;
    margin: 0 0 6px 0;
}
.totalpostnumber{
    display: block;
    float: left;
    position: relative;
    font-size: 13px;
    color: #374151;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    background-color: #f3f4f6;
    border-radius: 6px;
}
.jobtitlepostgrade{
    display: block;
    float: left;
    position: relative;
    font-size: 13px;
    color: #374151;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    background-color: #f3f4f6;
    border-radius: 6px;
}
.postgrade{
    display: block;
    float: left;
    position: relative;
    font-size: 15px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    padding: 5px;
    width: 50px;
}
.postnumber{
    display: block;
    float: left;
    position: relative;
    font-size: 14px;
    width: calc(100% - 10px);
    color: #374151;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    padding: 3px 5px 3px 5px;
}
.howtoapplytext{
    display: block;
    float: left;
    position: relative;
    font-size: 14px;
    width: calc(100% - 10px);
    line-height: 1.6;
    color: #333;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    padding: 4px 5px;
}
.howtoapplytitle{
    font-weight: bold;
    color: #1d4ed8;
    margin-right: 5px;
    display: block;
}
.postinfotext{
    font-weight: bold;
    margin-right: 5px;
}
.circularinfoholder{
    display: block;
    float: left;
    position: relative;
    width: calc(100% - 25px);
    padding: 12px 5px 12px 20px;
    border-top: 1px dashed #e5e7eb;
    margin-top: 6px;
}
.jc-postcard{
    border-top: none;
    margin-top: 10px;
    padding: 14px;
    background-color: #fafbfc;
    border-radius: 12px;
    width: calc(100% - 28px);
}
.circulartitleholder{
    display: block;
    float: left;
    text-align: left;
    width: calc(100% - 10px);
    margin: 4px 5px 5px 5px;
}
.circularcreatetimeholder{
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: calc(100% - 10px);
    margin: 0px 5px 6px 5px;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    font-size: 12px;
    color: #9ca3af;
}
.jc-editbtn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #eef2ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.jc-editbtn:hover{ background-color: #e0e7ff; }

.jc-homelink{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: left;
    width: fit-content;
    margin: 0 5px 10px 5px;
    color: #374151;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    background-color: #f3f4f6;
    padding: 6px 14px;
    border-radius: 999px;
    transition: background-color .15s ease;
}
.jc-homelink:hover{ background-color: #e5e7eb; }

/* ---------- New: circular image/PDF attachment ---------- */
.jc-attachmentholder{
    display: block;
    float: left;
    width: 100%;
    margin: 10px 0 4px;
}
.jc-attachmentimg{
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(17,24,39,.08);
}
.jc-pdflink{
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-family: 'Siyam Rupali', 'SolaimanLipi', Roboto, sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.jc-pdflink:hover{ background-color: #fee2e2; }
.jc-pdficon{ font-size: 22px; }

@media only screen and (max-width: 640px){
    .jc-card{ margin: 8px; width: calc(100% - 16px); padding: 14px; }
    .circulartitletext{ font-size: 16px !important; }
    .applybutton{ width: calc(100% - 40px); text-align: center; }
    .jc-postcard{ width: calc(100% - 20px); padding: 10px; }
}
.videolecturecontainer{
    display: block;
    position: relative;
    float: left;
    width: calc(100% - 46px);
    margin: 5px 5px 6px 1px;
    padding: 1px 0px 1px 0px;
    cursor: pointer;
    color: #333;
}
.circulartitletext{
    position: relative;
    float: left;
    width: calc(100% - 5px);
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin: 4px 0 0 0;
    color: #333;
    display: -webkit-box;
    /*font-weight: normal;*/
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
.othercircularholder{
    display: block;
    float: left;
    position: relative;
    margin: 5px 5px 5px 5px;
    width: calc(100% - 10px);
}
.tophalfholder{
    display: block;
    float: left;
    position: relative;
    width: 100%;
}
.addholder{
    display: block;
    float: left;
    position: relative;
    margin: 10px 5px 10px 5px;
    width: calc(100% - 10px);
    height: 300px;
}
.othercirculartitletext{
    display: block;
    position: relative;
    padding: 10px;
    float: left;
    margin-right: auto;
    margin-left: auto;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    width: 155px;
}
.othercircular{
    display: block;
    position: relative;
    float: left;
    width: calc(100% - 10px);
    padding: 5px;
    border-radius: 5px;
    /*background-color: #F9F9F9;*/
    margin-bottom: 10px;
}
.othercircular:hover{
    box-shadow: 0 1px 6px -3px #333333;
    background-color: #eceff4;
}
.videoimageholder{
    display: block;
    float: left;
    position: relative;
    width: 40px;
    height: 27px;
    margin-top: 3px;
}
.jobcircularimage{
    display: block;
    float: left;
    position: relative;
    width: 60px;
    height: 60px;
    /*margin-top: 3px;*/
}
.videoimage{
    width: 100%;
    height: 100%;
}
.indexcircularcontainer{
    display: block;
    position: relative;
    float: left;
    width: calc(100% - 70px);
    margin: 5px 5px 6px 1px;
    padding: 1px 0px 1px 0px;
    cursor: pointer;
    color: #333;
}
.circularcontainer{
    display: block;
    position: relative;
    float: left;
    width: calc(100% - 6px);
    margin: 5px 5px 6px 1px;
    padding: 1px 0px 1px 0px;
    cursor: pointer;
    color: #333;
}
.circularcontainer:hover {
    color:#333;
    /*font-weight: bold;*/
}
.jobcirculartitletext{
    display: block;
    position: relative;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    width: 100%;
}
.indexjobcirculartitletextholder{
    display: grid;
    align-items: center;
    position: relative;
    float: left;
    width: 100%;
    margin-left: 5px;
    height: 30px;
}
.indexjobcirculartitletext{
    position: absolute;
    float: left;
    width: calc(100% - 5px);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 21px;
    margin-top: 2px;
    color: #333;
    display: -webkit-box;
    text-align: left;
    font-weight: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    text-overflow: ellipsis;
}
.indexcirculardeadline{
    display: block;
    position: relative;
    float: left;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    width: calc(100% - 10px);
    margin-left: 10px;
    margin-top: 5px;
}
.circulardeadline{
    display: block;
    position: relative;
    float: left;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    width: calc(100% - 10px);
    margin: 3px 0px 0px 10px;
}
.lastdatecolor{
    color: #990000;
    font-weight: bold;
}