@import url('//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&display=swap');
:root {
  --color-black:#000;
  --color-grey:#505050;
  --color-gray:#AAABAB;
  --color-mute:#707070;
  --color-white:#fff;
  --color-whitecream:#f0f3f4;
  --color-whitelight:#adb5bd;
  --color-whitegrey:#cacaca;
  --color-buttercream:#F7E8D3;  
  --color-pinkdark:#d74b56;
  --color-pink:#ec407a;
  --color-orangelight:#fd7e14;
  --color-orangedark:#ff6900;
  --color-orange:#F5793B;  
  --color-tangerine:#FB9C2A;  
  --color-green:#228B22;
  --color-greenlight:#59A52C;
  --color-yellowdark:#f8bc57;
  --color-yellow:#fdd835;
  --color-gold:#CBB26A;
  --color-bluelight:#a7bce2;
  --color-blue:#0d47a1;
  --color-bluegalaxy:#223651;
  --color-cyan:#3498db;
  --color-red:#da1e34;  
  --color-error:#f44336;
}
*,*::before,*::after {box-sizing: border-box;-webkit-box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {margin: 0; padding: 0;font-family: 'Roboto', sans-serif;font-weight:400; font-size:12px; width: 100%; height: 100%;
color:var(--body-text-color); background: var(--body-bg);
}
input, select, textarea {font-family: 'Roboto', sans-serif;font-weight:400;font-size:14px; color:var(--body-input-color);}
button { background: transparent; border: 0; outline: 0;}
ul,ol,li {list-style: none;margin: 0; padding: 0;}
a {text-decoration: underline; }
strong, b {font-weight: 600; }
em, i {font-style: italic; }
img {  max-width: 100%; border:0; outline:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 300;margin: 0; padding: 0; border: 0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit;text-decoration: none; }
h1 {font-size: 3rem;line-height: 1.2; }
h2 {font-size: 2.25rem;line-height: 1.3; }
h3 {font-size: 1.25rem; }
h4 {font-size: 1rem; }
h5 {font-size: 0.9rem; }
h6 {font-size: 0.7rem; }
.text-left {text-align: left!important;}
.text-center {text-align: center!important;}
.text-right {text-align: right!important;}
.fleft{float:left!important;} 
.fright{ float:right!important;}
.text-wrap{white-space:normal!important}
.text-nowrap{white-space:nowrap!important}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.container {width: 100%; height: 100%; padding: 0; margin:0;}
.logincontainer{max-width:300px; width:80%; position:relative; top:55px; left:0; padding:0; margin: 0 auto;}
.clear{ clear: both;}
.d-block{ display: block!important;}
.d-inline{ display: inline-block!important;}
.border-radious-0{border-radius: 0!important;}
.linkdisabled {pointer-events: none;cursor: default;}
.position-relative { position: relative;}
.position-absolute { position: absolute;}
.position-fixed { position: fixed;}
.cursor-pointer { cursor: pointer;}
/*GRID COLUMNS*/
.row::after {content: "";clear: both;display: table;}
[class*="col-"] {position: relative;width: 100%;padding-right: 20px;padding-left: 20px; }
.flexbox {display: -webkit-box;display: flex;}
.flexcenter {align-items: center; justify-content: center;}
.flexbox .element {height: 100%; background-color:#f8f9fa; margin:5px 10px; padding:15px;}
.w-100{ width: 100%!important;}
.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}
.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}
.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}
.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}
.fw-30{ width: 30px!important;} 
.fw-40{ width: 40px!important;}

/*FONT SIZES*/
.font-9{ font-size: 9px!important;} .font-10{ font-size: 10px!important;}
.font-11{ font-size: 11px!important;} .font-12{ font-size: 12px!important;}
.font-13{ font-size: 13px!important;} .font-14{ font-size: 14px!important;}
.font-15{ font-size: 15px!important;} .font-16{ font-size: 16px!important;}
.font-17{ font-size: 17px!important;} .font-18{ font-size: 18px!important;}
.font-19{ font-size: 19px!important;} .font-20{ font-size: 20px!important;}
.font-21{ font-size: 21px!important;} .font-22{ font-size: 22px!important;}
.font-23{ font-size: 23px!important;} .font-24{ font-size: 24px!important;}
.font-25{ font-size: 25px!important;} .font-26{ font-size: 26px!important;}
.font-27{ font-size: 27px!important;} .font-28{ font-size: 28px!important;}
.font-29{ font-size: 29px!important;} .font-30{ font-size: 30px!important;}
.font-31{ font-size: 31px!important;} .font-32{ font-size: 32px!important;}
.font-33{ font-size: 33px!important;} .font-34{ font-size: 34px!important;}
.font-35{ font-size: 35px!important;} .font-36{ font-size: 36px!important;}
.font-37{ font-size: 37px!important;} .font-38{ font-size: 38px!important;}
.font-39{ font-size: 39px!important;} .font-40{ font-size: 40px!important;}

/* Text Colors */
.text-black{color:var(--color-black);}
.text-grey{color: var(--color-grey);}
.text-gray{color: var(--color-gray);}
.text-mute{color:var(--color-mute);}
.text-white{color:var(--color-white);}
.text-cream{color:var(--color-whitecream);}
.text-lightwhite{color:var(--color-whitelight);}
.text-whitegrey{color:var(--color-whitegrey);}
.text-buttercream{color:var(--color-buttercream);}
.text-yellow{color:var(--color-yellow);}
.text-gold{color:var(--color-gold);}
.text-orangedark{color: var(--color-orangedark);}
.text-orangelight{color: var(--color-orangelight);}
.text-orange{color: var(--color-orange);}
.text-tangerine{color: var(--color-tangerine);}
.text-green{ color: var(--color-green);}
.text-greenlight{ color: var(--color-greenlight);}
.text-pink{color:var(--color-pink);}
.text-blue{color:var(--color-blue);}
.text-bluegalaxy{color:var(--color-bluegalaxy);}
.text-cyan{color:var(--color-cyan);}
.text-red{color:var(--color-red);}
.text-error{color:var(--color-error);}
 
.color-deep-purple{color: #230344;}
.color-clay{color: #C99383;}
.color-terracotta{color: #B17A50;}
.color-taupe{color: #B9AC9D;}
.color-bright-blue{color: #137DC5;}

/* Background Colors */
.bg-pink-dark{background-color: var(--color-pinkdark) !important;}
.bg-pink-light{background-color: var(--color-pink) !important;}
.bg-orange {background-color:var(--color-orange) !important;}
.bg-yellow-light{background-color: var(--color-yellow) !important;}
.bg-light-blue{background-color: var(--color-bluelight) !important;}
.bg-white { background-color: var(--color-white) !important;}

/* HEADER */
.header {width:100%; display: inline-block; position: sticky;position: -webkit-sticky;top: 0; z-index: 9999;
background-color:var(--header-bg-color);}
.header.sticky{position:fixed;z-index: 10000; top:0; left:0;}

.topheader {padding:0 15px; display: flex; flex-wrap: wrap; justify-content: space-between;  
height: 70px; margin-bottom: 15px; align-items: center;background-image: linear-gradient(to right, #16345b, #da1e34);}
.topheader .pagetitle {color: var(--header-text-color); font-size:18px; }
.topheader .backbutton i{ color: var(--header-text-color); font-size:18px;  }
.topheader .taskitle {color:var(--header-title-color); font-size:16px; flex: 1; }

/* Side Navigation */
.sidenavbtn { cursor: pointer; text-align: center;}
.sidenavbtn i{ color: #fff; font-size:18px; line-height: 60px;}
.sidenav {height: 100%;width: 0;position: fixed;z-index: 9999;top: 0;right: 0;
background-color: var(--nav-bg-color); overflow-x: hidden;transition: 0.5s;}

.titlebar{ display: flex; flex-wrap:wrap; justify-content: space-between; height:60px;
padding:0 15px;background-color:var(--theme-color); line-height: 50px;}
.navtitle{ font-size: 15px; font-weight: 400;color: var(--theme-text-color)}
.closebtn a {color:var(--theme-text-color);}
.closebtn i { line-height: 60px; font-size: 18px;color: var(--theme-text-color);}

#dropmenu{ position: relative; display: block;}
.dropdown-content {display: none;}

i.logic { line-height: 50px;}
.menu ul li span.logname{ display: block; font-size: 18px; font-weight: 500;}

/* footer */
#footer {width: 100%;background-color:var(--footer-bg-color); position: fixed; z-index: 9; left: 0;bottom: 0;height: 50px; }
#footer .menu {width: 100%; height: inherit;}
#footer .menu ul {padding: 0; margin: 0; list-style: none; display: flex;}
#footer .menu ul li { flex: 1; text-align: center;}
#footer .menu ul li a { display: block; color: var(--footer-menu-color);} 
#footer .menu ul li a i {font-size:22px; line-height:50px; width: 30px;} 
#footer .menu a.active i{color: var(--theme-color);border-top: 2px solid var(--theme-color);}

#taskfooter {width: 100%; padding: 10px; background-color:var(--taskfooter-bg-color);
border-radius:0; position: fixed; z-index: 9; left: 0;bottom: 0;}
#taskfooter .taskmenu {width: 100%; height: inherit; position: relative;}
#taskfooter .taskmenu ul {padding: 0; margin: 0; list-style: none; display: flex;}
#taskfooter .taskmenu ul li { text-align: center;flex-grow: 8}
#taskfooter .taskmenu ul li.icon { font-size: 16px; line-height: 50px; padding: 0; width: 30px;flex-grow: 1}
#taskfooter .taskmenu ul li a { color: var(--taskfooter-menu-color)!important; }

.thdeloptions{display: none; width: 100%; padding: 10px; background-color:var(--body-bg-color); 
border-radius:0; position: fixed; z-index: 9; left: 0;bottom: 0;
flex-wrap: wrap; justify-content: center; height: 70px; align-items: center;}
.thdeloptions.show { display: flex;}
.thdeloptions.hide{ display: none;}
.thdelbtn,.del-btn {cursor: pointer; outline: 0; border-radius: 0!important;}
.thdelbtn:hover {background-color: #232323; border:1px solid #232323;}
.del-btn { background-color:#232323; border:1px solid #232323; color: #fafafa;}
.del-btn i {font-size:12px; line-height: normal;}
.del-btn:hover { background-color: rgba(244,67,54,0.8); color:#fafafa;}

/* Page Content */
.pagecontent{display: block; min-height: calc(100vh - 180px); margin: -15px 10px auto 10px; padding:10px 0 50px 0;
background-color:var(--body-content-bg);overflow-x: hidden; border-style: solid; border-width: 1px;
border-color:var(--body-content-border); border-radius: 20px 20px 0 0; }
.section,.section-fluid{display: block; }
.section-fluid{padding: 15px;}
.section{margin: 15px; padding: 15px;}
.pagetitle{ font-size: 18px; font-weight:500;}

/* Form Element Styles */
form{ padding:0; margin: 0; display: block; font-size: 16px;color:var(--form-color);}
select{-webkit-appearance:none;-moz-appearance:none;}
select:focus{outline:none!important; outline-width: 0 !important;
box-shadow: none!important;-moz-box-shadow: none!important;-webkit-box-shadow: none!important;}

#frmerr{display: none;}
.form-group {position: relative; margin-bottom: 30px;}
.input,.select,.textarea{border-style: solid; border-width: 1px;border-radius:0; background: transparent;
width:100%;font-size:16px;border-color:var(--input-border-color);color:var(--input-color);}
.input,.select{height:52px;line-height:normal;padding:10px;}
.textarea{min-height:70px;padding:10px;}

.input:focus,.textarea:focus{outline:none!important; border:1px solid var(--theme-color);}
.input.outside{padding-left:50px;}

 .select .option {color: var(--select-option-col)!important;background: var(--body-content-bg)!important;}

.searchbox{position: relative;}
.searchinput{width:100%; background: transparent; position: relative;padding:15px 50px 15px 10px;
border-style: solid; border-width: 1px;border-color:var(--input-border-color);color:var(--input-color); }
.searchinput:focus{outline:0!important;border:1px solid var(--theme-color);}
.search-icon,.date-icon{ position: absolute; top:12px; right:15px; font-size: 20px;}
.search-icon{ color:var(--icon-color);}
.date-icon{ color:var(--dateicon-color);}



.searchbar{position: relative; display: block; padding: 0 15px;margin: 0 0 30px 0;}

.postbox{position: relative;display: flex;align-items: center;gap: 8px;}
.postinput,.postarea{background: transparent; position: relative;padding:15px 50px; 
border-style: solid; border-width: 1px;border-color:var(--input-border-color);color:var(--input-color);}
.postinput:focus,.postarea:focus{outline:0!important;}

.attach-icon{ position: absolute; top:12px; left:10px; font-size: 20px; cursor: pointer; color:var(--icon-color);}
.send-icon{ position: absolute; top:12px; right:10px; font-size: 20px;}
.send-icon:not(:disabled) {cursor: pointer; color:var(--theme-color);}
.send-icon:not(:disabled) {cursor: pointer; color:var(--theme-color);}
.send-icon:disabled {color: var(--disabled-color);cursor: not-allowed;}

/* Custom Upload File */
.custom-file {position: absolute; z-index: 99; top:12px; left:10px;}
.custom-file input[type="file"] {display: none;}
.custom-file label {cursor: pointer;display: inline-block;color: var(--label-color);padding: 0 5px;text-align: center;
font-size: 20px;}  

/* Icon Rotation */
.fa-rotate-45m{--fa-rotate-angle: -45deg;}
.fa-rotate-90m{--fa-rotate-angle: -90deg;}
.fa-rotate-180m{--fa-rotate-angle: -180deg;}
.fa-rotate-360m{--fa-rotate-angle: -360deg;}
.fa-rotate-45p{--fa-rotate-angle: 45deg;}
.fa-rotate-90p{--fa-rotate-angle: 90deg;}
.fa-rotate-180p{--fa-rotate-angle: 180deg;}
.fa-rotate-360p{--fa-rotate-angle: 360deg;}

/* Floating Label */
.floating-label{position:absolute;pointer-events:none;top:16px;transition:.2s ease all;color:#777;font-size:16px;letter-spacing:.5px;z-index:3;}
.floating-label.outside{left:50px;top:16px;}
input:focus~.floating-label input:not(:focus):valid~.floating-label{top:12px;left:40px;font-size:10px;opacity:1;}
input:focus~.floating-label,input:valid~.floating-label{top:-7px;opacity:1;font-size:12px;background:#fff;padding:0px 5px;}
input:focus~.floating-label,input:not(:focus):valid~.floating-label{left:35px}

.input-icon{position:absolute;top:18px;z-index:3;color:#777;}
.input-icon.outside{left:17px;}
.form-group .fa{ font-size:15px;}

/* Custom checkbox */
.custom-checkbox {position: relative; margin-right:10px;}
.custom-checkbox input[type="checkbox"] {opacity: 0;position: absolute;margin: 5px 0 0 3px;z-index: 9;}
.custom-checkbox label:before{width: 18px;height: 18px;}
.custom-checkbox label:before {content: '';margin-right: 10px;display: inline-block;vertical-align: text-top;background: white;border: 1px solid #bbb;border-radius: 2px;
box-sizing: border-box;z-index: 2;}
.custom-checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;left: 6px;top: 3px;width: 6px;height: 11px;border: solid #000;border-width: 0 3px 3px 0;transform: inherit;z-index: 3;transform: rotateZ(45deg);}
.custom-checkbox input[type="checkbox"]:checked + label:before {border-color: #03A9F4;background: #03A9F4;}
.custom-checkbox input[type="checkbox"]:checked + label:after {border-color: #fff;}
.custom-checkbox input[type="checkbox"]:disabled + label:before {color: #b8b8b8;cursor: auto;box-shadow: none;background: #ddd;}

/* Button */
.btn{border:0; outline: 0; padding: 15px; font-size: 16px;border-radius:30px; cursor: pointer}
a.iconbtn{padding: 5px 8px;}
a.headbtn{padding: 10px 12px;}
.btn-sm{padding: 7px 10px!important; font-size: 13px !important;}
.btn-xs{padding: 4px 6px!important; font-size: 10px !important;}
.btn-yellow{background-color: var(--color-yellow); color: var(--color-black);}
.btn-orange{background-color: var(--color-orange); color: var(--color-black);}
.btn-green{ background-color: var(--color-green) ; color: var(--color-white);}
.btn-red{background-color:  var(--color-red); color: var(--color-white);}
.btn-pink{background-color: var(--color-pink); color: var(--color-white);}
.btn-blue{background-color: var(--color-blue); color: var(--color-white);}
.btn-grey{background-color: var(--color-grey); color: var(--color-whitegrey);}
.btn-cyan{background-color: var(--color-cyan); color: var(--color-white);}
.btn-black{ background-color: rgba(0,0,0,0.2); color: var(--color-whitegrey);}
.btn:disabled {opacity: 0.6;cursor: not-allowed;}

.btn-red:hover{background-color:  var(--color-blue);}

/* Button Outline */
.btn-outline{color:var(--button-outline-color); text-align: center; display: inline-block;
border-style:solid; border-width:1px; border-color:var(--button-outline-border);}

/* Plus Button */
.plusbutton {display: flex; align-items: center; justify-content: right; padding: 0 15px;
position:fixed; bottom:60px; z-index: 9; right: 0; }
.plusbutton a { width: 60px; height: 60px; background-color:var(--theme-color);text-align: center; color:var(--theme-text-color);
font-size: 16px;border-radius:30px; display: inline-block;}
.plusbutton a i { line-height:60px;}

/* Profile Menu */
#logmenu{padding:0; background-color:var(--nav-bg-color);width: 250px; position:fixed; right: 0; bottom:50px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 9999;}
#logmenu a {color: var(--nav-link-color);padding:12px 15px;text-decoration: none;display: block; text-align: left; 
font-size: 15px;}
#logmenu a i{font-size:14px!important; width: 25px !important; line-height: normal!important; text-align: center;} 
#logmenu a:hover{color:var(--theme-color)!important;} 

/* Error */
.error-message {padding: 10px;font-size: 14px;} 
.error-text {color:var(--color-error);line-height: 20px;}

/* Table Style */
table { width: 100%; color:var(--table-color);font-family: 'Roboto', sans-serif;}
table thead th{background-color:var(---table-header-bg);border-color:var(---table-header-border); color:var(--table-header-text);}
table td{font-size: 14px;position: relative;}

table a { text-decoration: none;color:var(--table-link-color);}
table a.icon { text-decoration: none;color:var(--table-icon-color);}
table sb{color:var(--table-sb-color); word-break: break-all;}

.table {table-layout: fixed;border-spacing: 0 5px; }
.table th {text-align: left;padding: 5px 15px;}
.table td {border: 1px solid #dadada;color: #000;padding: 10px 15px;border-radius: 15px;}
.table thead {display: table;table-layout: fixed;width: 100%;}
.table tbody {display: table;table-layout: fixed;width: 100%;border-spacing: 0 10px;}

/* Basic Style */
.basic {table-layout: fixed;border-spacing: 0 2px; }
.basic td {border-bottom: 1px solid #333333;color: #adb5bd;padding: 5px;}
.basic tbody {display: table;table-layout: fixed;width: 100%;border-spacing: 0 5px;}

/* Spacing Style */
.spacing-table {border-collapse: separate;table-layout: fixed;border-spacing: 0 5px;}
.spacing-table tr {background-color: #fafafa; color: #000000; }
.spacing-table th {text-align: left;padding: 5px 15px;}
.spacing-table td {color: #000;padding: 10px;}
.spacing-table td.other {border-radius: 15px; border-left: 2px solid #da1e34;border-bottom: 1px solid #da1e34;}
/*.spacing-table td.other:last-child {border-radius: 0 15px 15px 0;border-bottom: 1px solid #da1e34;}
.spacing-table td.selfassign:first-child {border-radius: 15px 0 0 15px; border-bottom: 1px solid #da1e34;}*/
.spacing-table td.selfassign{border-radius: 15px;border-bottom: 1px solid #da1e34;border-right: 2px solid #da1e34;}


.spacing-table thead {display: table;table-layout: fixed;width: 100%;}
.spacing-table tbody {display: table;table-layout: fixed;width: 100%;border-spacing: 0 10px;}
.spacing-table .t-title{color:#000;}


/* Task Thread List */
#threadlist {display: flex; flex-direction: column; justify-content: flex-end;
padding:0; margin-bottom:50px; min-height: calc(100vh - 70px);color: #000000; }
.thlist {padding: 12px; margin: 6px 0px; border-radius:15px; width:90%;
user-select: none;-webkit-user-select: none;-moz-user-select: none;}
.thlist:last-child{ border:0}
.thlist.selected {background-color: #000; }

/* TAB BUTTONS */
.tab_buttons{ display:flex; flex-wrap: wrap; flex-direction: row;margin: 0 0 30px 0; padding: 0 15px;}
.tab_buttons a{ color: var(--button-outline-color); text-decoration: none; text-align: center; display: inline-block;
border: 1px solid var(--button-outline-border);padding: 7px 10px; }
.tab_buttons .flexcol{ display:flex; align-items: center;  gap:5px }
.tab_buttons .links{ width: 80%;justify-content: left;}
.tab_buttons .pagebuttons{ width: 20%;justify-content: right;}
.tab_buttons a:hover{ background-color: var(--theme-color); color: var(--theme-text-color);
border: 1px solid var(--theme-color);}
.tab_buttons a.active{ background-color: var(--theme-color);  color: var(--theme-text-color);
border: 1px solid var(--theme-color);}

.previewbox{ width: 98%; height: 200px; position:fixed; right:15px; bottom:70px; background-color:var(--body-bg-color);
border:1px dotted var(--body-content-border); padding:10px; display: none;}
.previewbox img { object-fit: cover; max-width: 100%; max-height: 100%;}

.taskimg {width:100%; height: 170px; display: flex; flex-wrap: wrap;}
.taskimg.right { justify-content: flex-end;}
.taskimg.left { justify-content: flex-start;}
.taskimg img { object-fit: contain; max-width: 100%; max-height: 100%;}

/* Tags */
.tag {display: inline-block;border-radius: 3px;padding: 2px 5px 3px; font-weight: 600;margin-bottom:5px;color:#000}
.tag-sm {font-size: 11px;display: inline-block;letter-spacing: 0.15ch;}
.tag-lg {font-size: 16px;border-radius: 4px;}
.tag-black {background: #12181b;}
.tag-black-outline {border:1px solid rgba(0,0,0,0.8);color: #000;}
.tag-green {background:rgba(9,195,114,0.6);color: #fff;}
.tag-purple,.tag-month,.tag-months {background: rgba(145,102,204,0.6);color: #fff;}
.tag-red,.tag-year,.tag-years {background: rgba(244,67,54,0.6);color: #fff;}
.tag-orange {background: rgba(249,106,31,0.6);color: #fff;}
.tag-yellow {background: rgba(255,214,51,0.6);color: #000;}
.tag-pink {background: rgba(255,28,114,0.6);color: #fff;}

 /* Status Colors */
 .taskstatus { font-size: 12px; font-weight: 400;}
 .status-open {color:rgba(9,195,114,0.8) !important;}
 .status-awaiting {color:rgba(145,102,204,0.8) !important;}
 .status-inprogress {color:rgba(249,106,31,0.8) !important;}
 .status-replied {color:rgba(249,106,31,0.8) !important;}
 .status-closed {color:rgba(244,67,54,0.8) !important;}
 
 /* Button Group */ 
.button-group {display: flex; border: 1px solid var(--button-group-border);border-radius: 4px;}
.button-group .gb {flex: 1;border: none;  padding: 10px;cursor: pointer;
background-color:var(--button-group-bg);color:var(--button-group-color);}
.button-group .gb:not(:last-child) {border-right: 1px solid var(--button-group-border);}

/* The Modal (background) */
.modal {display: none; position: fixed;z-index: 999999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;
background-color: var(--modal-bg);}
.modal-content {display: block;width: 100%; }
.modal-content img{ width:100%; height:100vh; object-fit: cover;}
.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;}
.close:hover,.close:focus {color: #bbb;text-decoration: none;cursor: pointer;}
/* Modal Content (Image) */
.imgModal{cursor: pointer;}
.modalwindow {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;padding:5px;
overflow: auto; background-color: var(--modal-bg); }
.modal-content {margin: auto;max-width: auto; height: 100%; object-fit: contain;}
.modalwindow .modalclose {position: absolute;top: 15px;right: 35px;color:var(--modal-color);font-size: 40px;font-weight: bold;
transition: 0.3s;}
.modalwindow .modalclose:hover,.modalwindow .modalclose:focus {color: var(--modal-close-color);text-decoration: none;cursor: pointer;}

/* Fullscreen preloader */
.preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);  
display: none;justify-content: center;align-items: center;z-index: 9999;}
.loader {border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%;width: 50px;
height: 50px;animation: spin 1s linear infinite;}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  

/* === Confirmation Modal === */
.composer-modal {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.composer-modal.show {
  display: flex;
}

.composer-modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 25px 30px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  animation: scaleIn 0.25s ease;
}

.composer-modal-content h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #222;
}

.composer-modal-content p {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

/* Buttons */
.composer-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.composer-modal-actions button {
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

.btn-cancel {
  background: #f2f2f2;
  color: #333;
}
.btn-cancel:hover {
  background: #e0e0e0;
}

.btn-confirm {
  background: var(--color-blue);
  color: #fff;
}
.btn-confirm:hover {
  background: #0056b3;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.bell-container {position: relative;display: inline-block;}
.bell-badge {position: absolute;top: -5px;right: -8px;background: #FB9C2A;color: #000;
font-size: 11px;font-weight: bold;padding: 2px 6px;border-radius: 50%;min-width: 18px;text-align: center;}
.unread-dot {width: 10px;height: 10px;background-color: #59A52C;border-radius: 50%;display: inline-block;margin-right: 6px;position: relative;top: -1px;}