/* On screens that are 600px or less, set the background color to olive */
/* start Tab view section */

@media only screen and (max-width: 768px) {
    * {
        font-size: 12px;
    }

    body {
        padding: 0;
    }

    h3 {
        font-size: 18px;
    }

    .GlobalPrompt {
        font-size: 10px;
        padding-bottom: 10px;
    }

    .PromptSuccess,
    .PromptFail {
        width: 70%;
    }

    .Image-Box {
        background-image: none;
        width: 98%;
        height: 55px;
        border-top: 8px solid #11141b;
    }

    .Logo {
        padding: 0;
    }

    .Logo img {
        width: 60%;
    }

    .Right-Side,
    .Account-Count,
    .DashCounter,
    .ChartPanel,
    .Statastics {
        width: 100%;
        height: 100%;
        /* height:600px; */
    }

    .Main-Div {
        background-color: transparent;
    }

    .Title h1 {
        font-size: 20px;
    }

    .ERMS-Roles {
        width: 80%;

    }

    .Admin {
        width: 20%;
        font-size: 12px;
        margin-right: 26px;

    }

    .Manager {
        width: 20%;
        font-size: 12px;
        margin-right: 26px;

    }

    .Employee {
        width: 20%;
        font-size: 12px;

    }

    .login-form input {
        margin-bottom: 20px;
        /* width:90%; */
        padding: 10px;
    }

    .textarea {
        width: 100%;
        border-color: gray;
        margin: 6px 4px 8px 4px;
    }

    .Line {
        margin-top: 22px;
    }

    /* End Right Side Login Box */

    .Breadcrumb li,
    .Breadcrumb li a {
        font-size: 12px;
    }

    /* Header */
    .header {
        padding: .2rem 0 .2rem 1.5rem;
        width: 100%;
    }

    .Dashlogo {
        width: 20%;
        line-height: 80px;
        float: left;
        color: #fff;
        font-size: 28px;
    }

    .Dashlogo img {
        width: 100px;
    }

    .todate {
        width: 80%;
        font-size: 12px;
    }

    .todate img {
        width: 20px;
    }

    .WlcmText {
        display: none;
    }

    .nav_list span,
    .nav_list i {
        font-size: 12px
    }

    .nav_list a {
        margin-bottom: 10px;
    }

    .l-navbar {
        left: -100px;
        padding: 0;
    }

    .nav img {
        margin: 10px 0 0 8px;
    }

    /* Header End */
    .Master-Content-Box {
        padding: 20px 6px;
        min-height: 350px;
        margin-bottom: 40px;
    }

    /* Start Dashboard */
    .DashCounter {
        width: 24%;
        padding: 10px;
        margin: 3px;
    }

    .DashCounter h4 {
        font-size: 12px;
    }

    .DashCounter i {
        font-size: 20px;
        height: 40px;
        width: 40px;
        line-height: 38px;
    }

    .CountNum h3 {
        font-size: 24px;
    }

    .CountNum span {
        font-size: 10px;
    }

    .ChartPanel {
        width: 98%;
        height: 100%;
    }

    /* End Dashboard */

    /* Start Heading Section */
    /* Start Heading Button Section */
    .Heading-Btn-Container {
        height: 0px;
    }

    .HTitle-Container {
        display: none;
    }

    .HBtn-Container {
        float: none;
        width: 100%;
    }

    .HBtn-Container h2 {
        font-size: 16px;
    }

    .Common-Btn {
        font-size: 10px;
    }

    .Common-Btn-MV i,
    .Common-Btn i {
        display: block;
    }

    .Common-Btn-MV,
    .In-Out-Word-Btn {
        width: 30px;
        min-width: auto;
        height: 30px;
        border-radius: 50%;
        float: right;
        text-align: right;
        margin: -20px 2px 0 0;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 16px;
    }

    .MRT {
        margin: -20px 0px 0 0;
    }

    .In-Out-Word-Btn {
        top: -18px;
        position: relative;
        margin: 0;
    }

    .Common-Btn span {
        display: none;
    }

    .HTitle-Container h2 {
        font-size: 18px;
    }

    .Common-Btn-circle,
    .Common-Btn-Red,
    .Common-Btn-Green,
    .Common-Btn-Orange {
        font-size: 12px;
    }

    .Common-Btn-circle {
        border-radius: 4px;
        padding: 5px 10px;
        margin-left: 2px;
    }

    .Master-Btn-Container-Right {
        padding-top: 4px;
    }

    /* .Search-Filter-Container{
        margin-top: -18px;
    } */
    /* End Heading Section */

    /* Add Btn Popup  */
    .Popup-content {
        width: 88%;
    }

    .Popup-content h3 {
        font-size: 18px;
        padding: 0 0 8px 0;
    }

    .Popup-close-btn {
        width: 30px;
        height: 30px;
        font-size: 24px;
        line-height: 28px;
        top: -14px;
        left: 14px;
    }

    .Popup-content input,
    .Popup-content textarea,
    .Popup-content select{
        font-size: 10px;
        padding: 5px;
        margin: 4px 0;
    }

    /* End Add Btn Popup */

    /* Start Table */
    .Lead-table table thead th {
        font-size: 12px;
        line-height: 18px;
    }

    .Lead-table table td,
    .Lead-table table a {
        font-size: 12px;
        line-height: 22px;
    }

    ::-webkit-scrollbar {
        height: 8px;
    }

    /* End Table */

    /* Pagination Start */
    .cd-pagination .current {
        padding: 1px 2px;
    }

    .cd-pagination a,
    .cd-pagination span {
        padding: 0 4px;
    }

    .cd-pagination a,
    .cd-pagination span {
        font-size: 10px;
    }

    /* Pagination END */

    /* Add Emp Section */
    .AEP-TwoSection input,
    .AEP-TwoSection select,
    .AEP-ThreeSection input,
    .AEP-ThreeSection select {
        width: 100%;
        float: none;
        height: 26px;
        font-size: 11px;
    }

    .AEPT_comtent,
    .AEPT_Three-content-Sec,
    .AEP-TwoSection textarea {
        width: 100%;
        float: none;
        padding: 8px 6px;
        clear: both;
    }

    .AEPT_comtent input,
    .AEPT_comtent select,
    .AEPT_Three-content-Sec input,
    .AEPT_Three-content-Sec select {
        height: 26px;
        margin: 2px;
    }

    .AEP-ThreeSection input,
    .AEP-ThreeSection select {
        margin: 4px;
    }

    .Rediocontainer input {
        width: 30%;

    }

    .Rediocontainer {
        font-size: 14px;
        line-height: 34px;
        padding-left: 40px;
    }

    /* End Emp Section */

    /* Start Emp Profile Section */
    .profile-nav .user-heading a img {
        width: 90px;
        height: 90px;
    }

    .profile-nav,
    .profile-info,
    .Profile-section {
        width: 26%;
        height: fit-content;
    }

    .profile-nav {
        margin-right: 10px;
    }

    .profile-info {
        width: 70%;
    }

    .Profile-section {
        width: 100%;
    }

    .panel {
        margin-bottom: 10px;
    }

    .Profile-SubSection {
        margin: 2px;
        width: 49%;
    }

    .bio-row,
    .bio-graph-info h1 {
        width: 100%;
        padding: 4px 0 4px 6px;
        font-size: 14px;
        margin: 0;
        line-height: 20px;
    }

    .Row_Cont2 span {
        Width: 98%;
        display: block;
    }

    .Row_Cont1 span p,
    .Row_Cont2 span p {
        width: 80%;
    }

    .Row_Cont1,
    .Row_Cont2,
    .Row_Cont3,
    .Row_Cont4 {
        display: block;
    }

    .bio-row span {
        width: fit-content;
        font-size: 12px;
    }

    .bio-row p,
    .bio-row a {
        font-size: 12px;
    }

    .bio-graph-info {
        padding: 10px 0;
        Width: 100%;
    }

    .profile-nav .user-heading {
        padding: 10px 0;
    }

    .Profile-SubSection h3,
    .profile-nav .user-heading h1 {
        font-size: 18px;
    }

    .profile-nav ul>li>a,
    .profile-nav ul>li>a:hover,
    .profile-nav ul>li>a:focus,
    .profile-nav ul li.active a {
        padding: 0 10px;
        font-size: 12px;
    }

    .Emp-Doc {
        width: 47%;
    }

    .Doc-Icon {
        font-size: 1.2rem !important;
    }

    .Doc-Name {
        padding: 0;
    }

    .Doc-Name p {
        font-size: 10px;
        padding: 4px;
    }

    .Emp-Name-Dropdwn {
        width: 52%;
        height: 29px;
    }

    /* End  Emp Profile Section */

    /* Start Edit Project section */
    .CHBName {
        width: 224px;
        font-size: 12px;
        margin-left: -54px;
        padding: 4px 0 4px 54px;
    }

    .chbContainer img {
        height: 40px;
        width: 40px;
    }

    .checkmark {
        height: 44px;
        width: 44px;
    }

    .chbContainer .checkmark:after {
        left: 26px;
        top: -16px;
        width: 12px;
        height: 28px;
    }

    /* End Edit Project */
    /* Start Search filter */
    .Search-Filter-Container {
        margin: 0 auto;
        text-align: center;
        padding: 4px 0;
    }

    .Search-Filter-Container select,
    .Search-Filter-Container input {
        font-size: 10px;
        height: 24px;
        width: 20%;
        margin: 4px 0;
        padding: 0 0 0 8px;
    }

    .Search-Filter-Container input[class="SW50"] {
        width: 18%;
    }

    /* End Search Filter */
    /* Account Page */
    .Account-Count {
        width: 32%;
        padding: 6px;
        margin-right: 4px;
    }

    .Progress-Bar-Title,
    .Progress-Bar-Title span,
    .SetPopupToday p {
        font-size: 10px;
    }

    .Total-Count {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .CountertRow {
        grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
        margin: 5px;
    }

    /* Account End Page */

    /* Help Page */
    .Note span {
        font-size: 16px;
    }

    .Note p {
        font-size: 12px;
    }

    /* End Help Section */
    /* Start Timelog */
    .SetPopupTitle {
        font-size: 12px;
        width: 50%;
    }

    .SetPopupToday {
        width: 40%;
    }

    .SW80 {
        width: 100%;
        margin: 6px 4px 8px 4px;
    }

    /* End Timelog */
    .ProjectCode p,
    .Project-Id table th span {
        font-size: 14px;
    }

    .LeaveView {
        width: 50%;
        line-height: 4px;
        text-align: left;
    }

    .Project-Id table th {
        width: fit-content;
        min-width: 200px;
    }

    /* Start footer */
    .footer {
        height: 30px;
        line-height: 28px;
        width: 100%;
        padding: 0;
    }

    .footer p {
        font-size: 10px;
    }

    /* End footer */
    .globalbb {
        font-size: 16px;
        padding: 0 0 10px 0;
    }

    .Browse-btn-grad,
    .Popup-Browse-Btn {
        width: 99%;
        height: 26px;
        line-height: 26px;
    }

    .Popup-Browse-Btn {
        width: 79%;
        margin: 6px 0px;
    }

    .ProjectCode h3 {
        font-size: 16px;
    }

    .welcome {
        font-size: 300px;
    }

    .hidemview {
        display: none;
    }

    .login__box i {
        top: 9px;
        right: 20px;
    }

    .notifications-button {
        width: 24px;
        height: 24px;
    }

    .notifications__badge {
        top: -5px;
        width: 16px;
        height: 16px;
    }

    .Erms-notifications {
        width: 26%;
    }

    .select2-container {
        max-width: 20%;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        left: 12px;
    }

    .select2-container .select2-selection--single {
        margin: 2px;
        height: 26px;
        border: 1px solid #9c9caa;
        text-align: left;
        width: 100%;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 10px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        color: #828282;
        font-size: 11px;
    }

    .Proj-Counter {
        display: block;
    }

    .Proj-Counter ul li:nth-child(2) {
        font-size: 14px;
        min-width: 24%;
        height: 30px;
    }

    .Proj-Counter ul li {
        font-size: 10px;
        margin-left: 8px;
    }

    .Proj-Counter ul,
    .Penalty-sec-2 ul {
        min-width: 48%;
        height: 30px;
        margin: 3px;
    }

    .Proj-Counter {
        margin-top: 4px;
    }

    .Leave-Sec {
        width: 100%;
        margin: 0;
    }

    .Atte_Sec_2,
    .Atte_Sec_3,
    .Penalty-sec {
        text-align: left;
        float: left;
        width: 50%;
    }

    .Atte_Sec_2 ul,
    .Penalty-sec ul {
        min-width: 95%;
    }

    .Atte_Sec_3 ul:first-child {
        min-width: 96%;
        height: 96px;
    }

    .Leave-Sec2 ul {
        margin: 2px;
    }

    .TW-TL {
        width: 100%;
        display: inline-flex;
    }

    .MR-T {
        margin-top: 0;
    }

    .PaySlip-row1,
    .PaySlip-row2 {
        Width: 100%;
    }

    .PaySlip-Footer p span,
    .PaySlip-PerInfo p span {
        Width: 34%;
    }

    .PaySlip-Sec h2 {
        font-size: 12px;
        margin: 5px;
    }

    .PaySlip-Sec {
        Width: 96%;
    }

    .Project-Id table {
        width: 92%;
    }

    .select2-container {
        min-width: 18%;
    }

    .SetPopupBOXInner .select2-container .select2-selection--single {
        min-width: 138px;
    }

    .SetPopupBOXInner .Lead-table table td:first-child {
        text-align: left;
    }

    .SetPopupBOXInner .select2-container--default .select2-selection--single .select2-selection__arrow b {
        left: 120px;
    }

    .select2-container--open .select2-dropdown {
        min-width: 142px;
    }

    .Browse-Btn {
        width: 91.7%;
    }

    .Features {
        height: fit-content;
    }

    .form {
        Width: 98%;
    }

    .San-Form-logo img {
        width: 90%;
        left: 0;
        top: 0;
    }

    .San-Form-Header h3 {
        font-size: 12px;
    }

    .San-Form-logo {
        width: 38%;
    }

    .San-Form-Title {
        font-size: 1em;
    }

    .Sec2 input {
        width: 71%;
        margin: 5px 0;
    }

    .Sec1 {
        margin: 10px 0;

    }

    .San-Form-Footer {
        display: block;
    }

    .San-Form-Footer h2 {
        font-size: 16px;
    }

    .id-card {
        width: 100%;
    }

    .IdCard-Center {
        margin: 10px 0;
        display: inline-block;
    }


    .header_logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .sitelogo {
        width: 30%;
    }

    .Profile-Top {
        padding: 0 10px;
    }

    .Profile-Grid {
        display: block;
    }

    .profile-field {
        padding: 10px;
        display: flex;
    }

    .Profile-Left label {
        width: fit-content;
    }

    .profile-field span {
        margin: 0 4px;
    }

    .Address-Box label {
        width: 48px;
    }

    .Profile-Photo {
        width: 80px;
        height: 80px;
    }

}

/* End Tab view section */

/* Start Mobile View Section */
@media only screen and (max-width: 425px) {
    .select2-container {
        min-width: 43%;
    }

    .Search-Filter-Container input[class="SW50"] {
        width: 29%;
    }

    .DashCounter {
        width: 100%;
    }

    .SiteTitle {
        display: none;
    }

    .MSiteTitle {
        display: block;
        color: #fff;
        font-size: 16px;
        letter-spacing: 2px;
        width: 40%;
    }

    .Rediocontainer {
        padding-left: 24px;
    }

    .profile-nav,
    .profile-info,
    .Profile-section {
        width: 100%;
    }

    .Profile-SubSection {
        margin: 0 0 10px 0;
        width: 100%;
        min-height: 120px;
    }

    .Project-Id table {
        width: 70%;
    }

    .Search-Filter-Container select {
        width: fit-content;
    }

    .Search-Filter-Container .select2-container {
        min-width: 40%;
    }

    .Search-Filter-Container input {
        width: fit-content;
    }

    .SetPopupBOXInner .select2-container--default .select2-selection--single .select2-selection__arrow b {
        left: 86px;
    }

    .LeaveView {
        width: 100%;
    }

    .Browse-Btn {
        width: 81%;
    }

    .sidebar.close {
        display: none;
    }

}

/* End Mobile View Section */


@media only screen and (max-width: 992px) {
    .hidemview {
        display: none;
    }

}


/* Ipad view Section */
@media only screen and (max-width: 1220px) {
    .SiteTitle {
        width: 60%;
        margin-left: 28px;
    }

    .Erms-notifications {
        width: 8%;
        text-align: center;
    }

    .Rediocontainer input {
        width: 50%;
    }

    .Account-Count {
        width: 100%;
    }

}

/* End of Ipad View Section */

@media print {
    .San-Form-logo {
        width: 40%;
    }

    .HBtn-Container,
    .San-Form-Footer,
    .San-Form-Header {
        display: none;
    }

}

@media (max-width:576px) {

    .Popup-content {
        width: 95%;
        padding: 15px;
    }
.Popup-content input[class="SW50"], .Popup-content select[class="SW50"]{
    width: 48%;
}
.Popup-content input{
    width: 97%;
}
    .Otp-inputs {
        gap: 5px;
    }

    .Otp-inputs input {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    #otpModalTitle {
        font-size: 18px;
    }

    #setNumber {
        font-size: 14px;
        word-break: break-word;
    }

    .Popup-Submit-btn {
        margin-top: 10px;
        height: 35px;
    }

    .Exam-timer h4 {
        font-size: 14px;
        text-align: center;
    }

    .resend-link {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
}