*{padding:0;margin:0;font-family:"Montserrat",sans-serif!important;}
html{-webkit-text-size-adjust:100%;}
html,body{width:100%;height:100%;font-family:"Montserrat",sans-serif;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,strong,b,u,i,ol,ul,li,fieldset,form,label,table,tbody,tr,th,td,embed,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}blockquote{quotes:none;}blockquote:before,blockquote:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
body{padding:0 0 30px;margin:0;color:#333;background:#fff;font-size:14px;line-height:1.6em;}
body{background-repeat: no-repeat;background-attachment: fixed;}
body p{margin:10px 0;}
body a{text-decoration:none;}
h1,h2,h3,h4{font-weight:bold;line-height:1.2em;}
h1{font-size:32px;}
h2{font-size:24px;}
h3{font-size:18px;}
h4{font-size:16px;}

.container{margin:0 auto;width:1400px;max-width:1400px;height:100%;position:relative;display:table;}

#logo_login{margin:0 auto 15px!important;display:block;}

#header{padding:15px 0;width:100%;height:70px;float:left;position:relative;top:0;left:0;background:#162A39;box-sizing:border-box;z-index:999;}
#logo{margin: 0 15px 0 0;padding: 0 15px 0 0;width: 170px;display: inline-block;vertical-align: middle;border-right: 2px solid #fff;}
#header h1{margin:0;color: #fff;display: inline-block;vertical-align: middle;font-size: 18px;text-transform: uppercase;font-weight: 600;letter-spacing: 2px;}
#header #hdr_extra{float:right;}
#header #hdr_extra a{color:#fff;font-size:16px;}
#backToList {display:none;float: right;color: #fff;font-size: 16px;}
#backToList.show-back-to-list {display: inline-block;}

.header {display: flex;justify-content: flex-end;margin-bottom: 20px;}
.header a {background-color: #123e7f;color: #fff;padding: 10px 20px;border-radius: 5px;text-decoration: none;}

#main_content{margin:0;padding:60px 0;width: 100%;height:100%;display: table;float: left;}

#form_con{width:100%;height:100%;display:table;text-align:center;}
#form_con #form_con_inner{display:table-cell;vertical-align:middle;}
#form_con img{margin:0 auto 15px;width:300px;}
form label{display:block;text-transform:uppercase;}
form input, form select, form textarea{margin:0 auto 15px;padding:10px;width:300px;display:block;text-align:center;box-sizing:border-box;}
form input[type="submit"]{padding:10px 30px;width:auto;background:#e8371f;border:none;color:#fff;}
#footer{padding:5px 0;width:100%;float:left;background:#162A39;text-align:center;}
#footer p{color:#fff;}
#form_con.rform{margin:-220px 0 0;}

.dashboard-widgets{display: flex; flex-wrap: wrap;justify-content: space-around;}
.dashboard-widgets .widget-block{flex: 0 0 calc(50% - 20px);margin: 10px;margin-bottom: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 10px;overflow: hidden;background-color: #ffffff; /* Add this line */ transition: background-color 0.3s ease; /* Add this line */}
.dashboard-widgets .widget-block:hover {
    background-color: #f0f0f0; /* Light gray color on hover */
}
.dashboard-widgets .widget-block a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: inherit;
}

#table_con {
    margin-top: 20px;
}

#table_con h3 {
    margin-bottom: 10px;
}

#table_con table {
    width: 100%;
    border-collapse: collapse;
}

#table_con th, #table_con td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#table_con tr:nth-child(even) {
    background-color: #f2f2f2;
}

#table_con th {
    background-color: #162A39;
    color: white;
}

#profile_details{width:100%;float:left;}
#profile_details .left{width:33%;float:left;}
#profile_details .left img{width:100%;display:block;}
#profile_details .right{width:60%;float:right;}

#client_details{width:100%;float:left;}
#client_details .left{width:33%;float:left;}
#client_details .left img{width:100%;display:block;}
#client_details .right{width:60%;float:right;}

.task-table {width: 100%;border-collapse: collapse;margin-top: 20px;}
.task-table th,
.task-table td {border: 1px solid #ddd;padding: 8px;text-align: left;}
.task-table th {background-color: #f2f2f2;color: #333;}
.task-message {margin-bottom: 20px;font-size: 1.2em;}

.task-message { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 1.2em; }
.reselect-month-button { padding: 10px 20px; background-color: #123e7f; color: white; text-decoration: none; border-radius: 5px; font-size: 1em; }
.reselect-month-button:hover { background-color: #0056b3; }
.schedule-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure the container spans the full width */
}

.schedule-results .return-button {
    margin-left: auto; /* This will push the button to the right */
    margin-right: 0; /* Ensure there is no margin on the right side */
}

.schedule-results h1 {
    display: inline-block;
    margin-left: 20px; /* Adjust as needed for spacing */
}

.bbtn{margin: 20px 0;display: inline-block;}
.bbtn a{padding: 10px 40px;background: #123e7f;font-size:16px;color:#fff;display:inline-block;border-radius:30px;}
.bbtn a:hover{background:#3668b3;color:#fff;}
.bbtn a.btn-red{background:#c1272d;color:#fff;}
.bbtn a.btn-red:hover{background:#d92e35;color:#fff;}

/*Schedule Results view*/

.schedule-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.schedule-title {
    margin-right: 20px; /* Adjust this value to increase/decrease spacing */
}
.task-count {
    margin-right: auto; /* This pushes the button to the right */
}

@media(max-width:1400px){
.container{margin:0 auto;padding:0 30px;width:100%;box-sizing:border-box;}
}
@media(max-width:600px){
#profile_details .left{width:100%;}
#profile_details .right{width:100%;}
}

@media(max-width:600px){
#client_details .left{width:100%;}
#client_details .right{width:100%;}
}

@media (max-width: 600px) {
    .dashboard-widgets .widget-block {
        flex: 0 0 100%;
    }
}

#client_mapping {
    margin-top: 20px;
}

#client_mapping h3 {
    margin-bottom: 10px;
}

#client_mapping table {
    width: 100%;
    border-collapse: collapse;
}

#client_mapping th, #client_mapping td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#client_mapping tr:nth-child(even) {
    background-color: #f2f2f2;
}

#client_mapping th {
    background-color: #162A39;
    color: white;
}

.search-bar {
    margin-bottom: 20px;
}

#clientSearch {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.delete-button-container {
    margin-top: 20px;
    text-align: right;
}

#delete-button {
    background-color: #c1272d;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

#delete-button:hover {
    background-color: #d92e35;
}

.create-task-btn {
    background-color: #123e7f;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
}

.create-task-btn:hover {
    background-color: #0056b3;
}

#floating-delete-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.add-icon {
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

#jumpToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #e8371f; /* Changed to orange */
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: none;
    z-index: 1000;
    transition: background-color 0.3s, opacity 0.3s;
}

#jumpToTop:hover {
    background-color: #ff5733; /* Lighter orange for hover effect */
}