*{margin:0; padding:0; box-sizing: border-box;}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
:root{
    --main-bg-color:#0061a6 ;
    --secondary-bg-color:#f6fbff;
    --white--color:#ffffff; 
    --text-color:#131e26;
    --border-color:#0565aa;
    --nav-bg-color:#005b9d;  
    --nav-text-color:#7cb1d5; 
    --site-hedding-text-color:#1b1b1b;
    --button-bg-color:#f5d814;
}
body{ background:var(--secondary-bg-color); font-family: 'Poppins', sans-serif !important; color: var(--text-color);}
ul,li,ol{ list-style: none;}
a,a:hover{ text-decoration: none;}
.cs-button{ border:none; background:#0061a6; outline:none; padding:5px 10px; margin:5px 5px 5px 0; display: inline-block; color:#fff; font-weight: 400; font-size: 14px; border-radius:5px;} 
.cs-button:hover{ background:#f5d814; color:#0061a6;}
label{ font-weight:500 !important; font-size: 16px !important; float:none!important; font-family: 'Poppins', sans-serif !important; margin: 0px 0px 6px; padding: 0px; display: block; color: var(--text-color); font-weight: 500;}
.form-group span{font-weight: 600; color:var(--main-bg-color);}
.form-control{ border:2px solid #C9CED9; outline: none; border-radius: 10px;}
.form-group.row { margin-left: 0; margin-right: 0;}
 input{ outline:none; font-size:20px; font-weight: 400; color: var(--text-color);}
 input[type="button"]{ width: 100%; background: var(--button-bg-color); font-size:20px; padding: .375rem 50px; font-weight:600;color:var(--text-color);  display: block; border-radius: 10px; border: none; text-transform: uppercase;}
 input[type="button"]:hover{ opacity: .8;}
 input[type="submit"]{ width: 100%; background: var(--button-bg-color); font-size:20px; padding: .375rem 50px; font-weight:600;color:var(--text-color);  display: block; border-radius: 10px; border: none; text-transform: uppercase;}
 input[type="submit"]:hover{ opacity: .8;}
 input[type="submit"].blue-btn{background-color: #007bff;  border-color:#007bff; color:#fff;margin-right:20px;}
 a.redoc{background-color: #007bff; color:#fff; padding: 5px 20px; border-radius:5px; font-weight:bold; outline:none; text-decoration:none; }
 a.redoc{background-color: #131e26;color:#fff;text-decoration:none; }

 .t_btn{ display:flex;}
 .btn_r{ margin-left:auto;display:flex;}
 .col-sm-3.colon{position:relative;}
 .col-sm-3.colon:before{ position:absolute; right:0px; top:0px; content:":"; color: #000;}
 .about_img img{ width:100%!important; height: auto!important;}

h1{ color:var(--main-bg-color); font-size:35px; font-weight:700; margin-bottom: 20px; letter-spacing:1.7px;}
h2{ color:var(--main-bg-color); font-size:24px; font-weight:700; margin-bottom: 20px; letter-spacing:1px;}
h3{ color:var(--main-bg-color); font-size:20px; font-weight:600; margin-bottom: 15px; letter-spacing:1px;}
h4{ color:var(--text-color); font-size:24px; font-weight:500; margin-bottom: 20px; letter-spacing:1px;}
p{ color:var(--text-color); font-size:16px; font-weight:400; margin-bottom: 20px;letter-spacing: 1.1px;}
a{ color:var(--main-bg-color);}
a:hover{ color:var(--main-bg-color);}
.welcome_sec{height: 100vh; width: 100vw; position: relative; }
.welcome_sec img{ width: 100%; height: 100%;}
.w_main{ position: absolute; top:0; left:0px;height: 100vh; width: 100vw;}
.w_left{ display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column;}
.w_left h1{ margin-bottom: 10px; text-align: center;}
.w_left p{ margin-bottom: 50px; text-align: center;}
.w_form{ margin: 0px auto; max-width:500px; width:90%;}
.w_logo img{ width: auto; height: auto;}
.w_logo{ position: absolute; bottom: 10%; right:12%;}

.l_sec{ background:var(--main-bg-color); min-height: 100vh; padding:10px;}
 .logo_sec{background:var(--secondary-bg-color);padding:20px; text-align: center;}
 .logo_sec img{  max-width: 100%;}
 #sidebar{ padding: 20px 0px;}
 #sidebar ul{ width: 100%;}
 #sidebar ul li{ border-bottom: 1px solid #0568ae;}
 #sidebar ul li.db_active a{background: var(--nav-bg-color); }
 #sidebar ul li.db_active ul li a{ background:none;}
 #sidebar ul li.db_active ul li.db_active a{ background:none; color:#fff;}
 #sidebar ul li a{color: var(--nav-text-color); padding:15px 50px; font-size: 15px; font-weight: 500; position: relative;}
 #sidebar ul li a:hover{color: var(--white--color);background: var(--nav-bg-color);}
 
 #sidebar ul ul { padding:10px 0px 0px 50px; position: relative;}
 #sidebar ul ul li a{padding-left: 0px;} 
 #sidebar ul ul li a:before{ display: none;}
 #sidebar ul ul li a:hover{ background: none;}

 #sidebar ul li a:before{ width: 25px; height: 25px; position: absolute; top: 16px; left:20px;  content:""; background: url(../images/s4.png) no-repeat top left;}
 #sidebar ul li a:hover:before{filter: brightness(1);filter: contrast(100); }

 #sidebar ul li:nth-child(1) a:before{background: url(../images/s1.png) no-repeat top left;}
 #sidebar ul li:nth-child(2) a:before{background: url(../images/s2.png) no-repeat top left;}
 #sidebar ul li:nth-child(3) a:before{background: url(../images/s3.png) no-repeat top left;}
 #sidebar ul li:nth-child(4) a:before{background: url(../images/s4.png) no-repeat top left;}
 #sidebar ul li:nth-child(5) a:before{background: url(../images/s5.png) no-repeat top left;}
 #sidebar ul li:nth-child(6) a:before{background: url(../images/s6.png) no-repeat top left;}
 #sidebar ul li:nth-child(7) a:before{background: url(../images/s7.png) no-repeat top left;}
 #sidebar ul li:nth-child(8) a:before{background: url(../images/s8.png) no-repeat top left;}
 #sidebar ul li:nth-child(9) a:before{background: url(../images/s9.png) no-repeat top left;}
 #sidebar ul li:nth-child(10) a:before{background: url(../images/s10.png) no-repeat top left;}
 #sidebar ul li:nth-child(11) a:before{background: url(../images/s11.png) no-repeat top left;}
 #sidebar ul li:nth-child(12) a:before{background: url(../images/Fees.png) no-repeat top left;}
 #sidebar ul li:nth-child(13) a:before{background: url(../images/s13.png) no-repeat top left;}
 #sidebar ul li:nth-child(14) a:before{background: url(../images/s14.png) no-repeat top left;}
 #sidebar ul li:nth-child(15) a:before{background: url(../images/s15.png) no-repeat top left;}
 #sidebar ul li:nth-child(16) a:before{background: url(../images/s16.png) no-repeat top left;}
 #sidebar ul li:nth-child(17) a:before{background: url(../images/s17.png) no-repeat top left;}
 #sidebar ul li:nth-child(18) a:before{background: url(../images/s18.png) no-repeat top left;}
 #sidebar ul li:nth-child(19) a:before{background: url(../images/s19.png) no-repeat top left;}
 #sidebar ul li:nth-child(20) a:before{background: url(../images/s20.png) no-repeat top left;}
 #sidebar ul li:nth-child(21) a:before{background: url(../images/s21.png) no-repeat top left;}
 #sidebar ul li:nth-child(22) a:before{background: url(../images/s22.png) no-repeat top left;}
 #sidebar ul li:nth-child(23) a:before{background: url(../images/s23.png) no-repeat top left;}
 #sidebar ul li:nth-child(24) a:before{background: url(../images/s24.png) no-repeat top left;}
 

 .right_sec{ background: var(--white--color);}
 .logo_right{margin:10px 35px 0px;}
 .user_name{display: flex; margin-bottom: 10px;}
.user_name p{ font-size: 14px; color: var(--text-color); margin:7px 0px 0px;}
.user_img{ width: 38px; height: 38px; border-radius: 50%; justify-content: center; align-items: center; color:var(--white--color);background:var(--main-bg-color); padding: 2px; display: flex; margin: 0px 0px 0px 10px; position: relative;}

.user_img .dropdown-menu{ right:0px!important; left: inherit!important; top: 13px!important;transition: all 0.5s ease; transform: translate3d(0px, 27px, 0px)!important;}
.user_img .dropdown-toggle:after{ display:none;}
.user_img .dropdown-menu a{ font-size: 14px;}
.custom-file + p{ text-align: right;}
.custom-file img{ width: 30px; height:30px; margin-top:5px; }
label.error{ font-size:12px; color:red;}
.r_sec{ padding: 20px; background: #f6fafe;}
.r_banner{background: var(--white--color); padding: 20px; border-radius:8px;box-shadow: 0px 10px 20px #0B233A14; border: none; overflow: hidden; margin-bottom: 30px; position: relative;}
.db_img{ width: 100%; margin-left: auto; text-align: right;}
.db_img img{ max-width: 100%;}
.db_text{ padding: 20px; width:50%; position: absolute; top:50%; transform: translateY(-50%);}
.db_text p{ margin-bottom: 0px;}
.db_text h2{ margin-bottom: 10px;}
.row .col-sm-10{ padding-left:0;} 
label.error{ font-size: 12px !important;}
.container-fluid + .container-fluid{ background:#f6fafe;}
.r_box{ border: 1px solid #D9E6EF; border-radius: 5px; box-shadow: 0px 15px 30px #1E344314; background:#fff; padding:18px; margin:0 0 20px 0;}
.s_italic{ font-size:12px; letter-spacing: 0; font-style: italic; color:#ccc; display: inline-block; margin:0 0 20px 0;}
.s_italic.none{ font-style:normal;}
.r_box .row{ margin:15px 0;}
.r_box h4{ font-size:20px; margin:0 0 27px 0;}
.r_box p{ margin-bottom:0;} 
.r_box table{  table-layout: fixed;}
.r_box table thead tr th{ font-weight: 600; font-size: 14px; color: #0061A6; vertical-align: middle;}
.r_box table tbody tr td{ vertical-align: middle; font-size:14px; color: #131E26; font-weight:500; word-break: break-all;} 
.r_box table tbody tr td img{ width:50px; height:50px; object-fit: cover;} 
.r_box table tbody tr td .active_btn{ font-size: 14px; font-weight: 500;}
.r_box table.table-striped tbody tr:nth-of-type(odd){ background:#F6FBFF;}
.r_sec-top{ display:flex; justify-content: space-between; align-items: center; margin:0 0 20px 0;} 
.r_sec-top h2,.r_sec h2,.r_sec h3{ font-weight: 600; font-size: 20px; color: #0061A6; margin-bottom:0;}
h2.heading-left{ float:left;}
.r_sec h2,.r_sec h3{ margin-bottom:20px;}
.r_sec-top form{ display:flex;}  
.dataTables_wrapper table thead tr:nth-child(1){ background:#f5d814;}
.dataTables_wrapper table thead tr:nth-child(1) th{ color:#1d2625;}
.dataTables_wrapper table thead input{ outline: none; text-align: center; display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } 
/*.dataTables_wrapper .row:nth-child(1) .col-sm-6:nth-child(1){ display:none;}*/

.dataTables_wrapper .row:nth-child(1){ width:100%;}
.dataTables_wrapper .row:nth-child(1) .col-sm-6:nth-child(2) input{ width:100%; margin-left:20px; } 
.dataTables_wrapper .row:nth-child(3){ width:100%; background:#f5d814; padding:20px 0; align-items: center;}
/* .dataTables_wrapper .row:nth-child(3) .col-sm-5{ width:100%; max-width: 100%; flex: 0 0 100%; text-align: center;}*/
script + table{ display: none;} 
.dataTables_length label{ justify-content: left !important;}
.dataTables_length label select{ margin:0 5px;}

.dataTables_wrapper .row:nth-child(3) .col-sm-5{ }
.dataTables_paginate ul.pagination{ display:block; text-align: right; margin:0;}
.dataTables_paginate ul.pagination li{ display:inline-block;}
.dataTables_paginate ul.pagination li a{ color:#212529; border:1px solid #212529; padding:5px 10px; margin:0 5px; border-radius:5px; transition:all 0.3s ease-in-out;}
.dataTables_paginate ul.pagination li a:hover,.dataTables_paginate ul.pagination li.active a{ text-decoration: none;  border:1px solid #007bff; background:#007bff; color:#fff;}



.v_main{ display: flex; flex-wrap: wrap; }
.v_box{ width: 23%; border-radius:8px;box-shadow: 0px 12px 40px #3075A71A; border: 1px solid var(--button-bg-color); padding:20px 20px 0px; margin-bottom: 30px; margin-right:2%; }
.v_box:nth-child(even){border: 1px solid var(--main-bg-color);}
.v_box img{ margin: 0px 20px 0px 0px; max-width: 100%; float: left; width:60px; height:60px;}
.v_box p{ text-transform: uppercase; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #131E26; margin-bottom: 0px;}
.v_box p strong{ font-size:22px; font-weight: 600; display: block; line-height: 28px;}
.v_box a.nav-link{ display: flex; align-items: center;}

table tr th{ color: var(--main-bg-color); font-size: 17px; font-weight: 700;}
table tr td{font-size: 17px;font-size: 17px; font-weight:500;color: var(--text-color);}
.table-striped tbody tr:nth-of-type(odd){ background:var(--secondary-bg-color);}
.table-striped tbody tr:nth-of-type(even){ background:var(--white--color);}
.table tbody tr.selected{ background:#add8e6 !important;}
.active_btn{background: var(--button-bg-color); font-size:16px; padding: .375rem 20px; font-weight:600;color:var(--text-color);  display:inline-block; border-radius: 10px; border: none;}
.pending_btn{background:#f00; font-size:16px; padding: .375rem 20px; font-weight:600;color:var(--white--color);  display:inline-block; border-radius: 10px; border: none;}

.c_box_wrapper{ display:flex; flex-wrap: wrap;}
.c_box_bg .c_box{ background:#f3faff;}
.c_box {
    
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:280px; 
    margin: 0px 1.8% 30px 0;
    flex-grow: 1;
  } 

  .c_box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .checkmark {
    position: absolute;
    bottom:-10px;
    left:50%;
    height: 25px;
    width: 25px;
    background-color: none; border-radius: 50%;transform: translateX(-50%);
  }
  
 
  .c_box:hover input ~ .checkmark {
    background-color: none;
  }
  
  /* When the checkbox is checked, add a blue background */
  .c_box input:checked ~ .checkmark {
    background-color:var(--button-bg-color);
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .c_box input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .c_box .checkmark:after {
    left:11px;
    top:5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
.c_inner{  display: flex; align-items: center; text-align: center;box-shadow: 0px 9px 12px #15181A1C;
 border: 1px solid #0061A65C; flex-direction: column; padding:24px 0 33px 0;}
 .c_inner img{ width:77px; height:77px; border-radius: 50%; border:4px solid var(--button-bg-color); margin-bottom: 16px;}
 .c_inner h5{ color: var(--main-bg-color); margin-bottom: 6px; font-size: 20px; font-weight: 500;}
 .c_inner p{ color: var(-text-color); margin-bottom:0px;  font-size:14px; font-weight:400;}
.submit-center{ text-align: center;}
.submit-center input[type="submit"]{ max-width:260px; margin:0 auto;}
 .report_main{ display: flex; flex-wrap: wrap; padding-bottom: 20px;}
 .report_box{ width:23%; margin: 0px 1% 20px;  border: 1px solid #0061A65C; display: flex; padding: 20px; border-radius: 8px;box-shadow: 0px 9px 12px #15181A1C;}
 .report_main h5{ color: var(--main-bg-color); margin-bottom: 5px; font-size: 20px; font-weight: 500;}
 .report_main p{ color: var(-text-color); margin-bottom:10px; font-size:14px; font-weight:400;}
 .report_img{}
 .report_img img{ width:52px; height:52px; border-radius: 50%; border:2px solid var(--button-bg-color); margin: 0 20px 20px 0px;}
 #sidebar ul.nav{ display: block;}
 .updatepicture{ display:flex; align-items: center;}
 body .custom-file-input:lang(en)~.custom-file-label::after{ content:"Upload";}

 .tickets_head{ display:flex;}
 .tickets_right{ width: 100px; margin-left:auto;}
 .tickets_head{ display:flex; padding-bottom:20px;}
.tickets_right{ width:auto; margin-left:auto;}
.tickets_right select.form-control{ width:200px!important; display:inline-block;}
.tickets_right .btn.btn-primary.mr-2.filter {margin-top: -2px;}

.ticket_main {display: flex;flex-wrap: wrap; justify-content: space-between;}
.ticket_box{ width: 31%;border-radius: 8px; box-shadow: 0px 12px 40px #3075A71A; border: 1px solid var(--button-bg-color); margin: 0px 0% 30px; padding:20px;}
.ticket_box:nth-child(even) { border: 1px solid var(--main-bg-color);}
.ticket_box a{ display: flex; align-items:center;}
.ticket_box a:hover{ text-decoration:none;}
.ticket_box img{ margin: 0px 20px 0px 0px;}
.ticket_box p{ text-transform: uppercase; font-size: 21px; font-weight:500;color: #131E26; margin:0px;}
.ticket_box p strong{ display: block; font-weight:700; color: #000; font-size:36px;}
.red_star{ margin: 0px 0px 0px 20px;border: none !important; width: auto !important; height: auto !important;}

.ticket_view{ display:flex; align-items:center;padding: 20px; background: #f6fafe; margin-bottom:20px;}
.tview_inner{ width:25%; text-align:center;}
.tview_inner p{ font-size: 16px; font-weight:500;color: #131E26; margin:0px; }

.ticket_info{ display: flex;background: #f6fafe; padding:10px 20px; width: 100%;}
.ticket_info:nth-child(even){ background: #fff;}
.ticket_info_left{}
.ticket_info_right{ margin-left: auto;}
.btn_right {margin: 0px 15px 20px !important; float: right; background:#0061A6!important; color:#fff!important; width: auto!important; }
.ticket_info h5{ font-weight: 600; margin-bottom:0px; color:#0061A6;}
.close_tkt{margin: 0px 10px 0px 0px;background: #0061A6 !important;color: #fff !important;padding:7px 20px; font-weight:600; border-radius:5px;}

/* welcome  */

.organization-welcome{ background:url(../images/organization-bg.png) no-repeat center top; padding:30px 4.6% 0 0 ; display:flex; height:100vh; background-size:cover;}
.welcome-left{ width:51.1%; display: flex; align-items: center; justify-content: center;}
.welcome-right{ width:48.9%; background:url(../images/login-right.png) no-repeat center top; padding:147px 0 0 0; border-radius:25px;}
.organization-welcome .w_form{ text-align: center;}
.organization-welcome .w_form h1{ font-weight: 600; font-size: 34px; letter-spacing: 1.7px; color:#fff; margin:0 0 7px 0;}
.organization-welcome .w_form h1 + p{ font-size: 22px; letter-spacing: 1.1px; color: #FFFFFF; margin:0 0 88px 0;}
.organization-welcome .w_form label{ font-size: 17px; letter-spacing: 0.85px; color: #FFFFFF; margin:0 0 6px 0;}
.organization-welcome .w_form input[type="text"],.organization-welcome .w_form input[type="password"]{ height:77px;}
.organization-welcome .w_form .input-group{ margin:0 0 0 0;}
.organization-welcome .w_form .form-group{ margin:0 0 24px 0;}
.organization-welcome .w_form input[type="submit"]{ padding:21px 0 20px 0;}
.organization-welcome .w_form .text-left a,.organization-welcome .w_form .text-right a{ color:#fff;}
.organization-welcome .w_form .text-left a:hover,.organization-welcome .w_form .text-right a:hover{ color:#f5d814;}
.r_box_bg .org-reports{ display:flex; justify-content: space-between;}
.r_box_bg .org-reports .report-box{ width:19%; margin:0; border:none; border-radius:5px; text-align: center; padding:25px 0; text-transform: uppercase;}
.r_box_bg .org-reports .report-box  p{ color:#fff; font-weight: 600; font-size:16px; letter-spacing: 0;}
.r_box_bg .org-reports .report-box  p strong{ font-weight: 600; color: #fff; font-size:16px; display: block; margin-top:5px;}
.r_box_bg .org-reports .report-box:nth-child(1){ background:#091d48;}
.r_box_bg .org-reports .report-box:nth-child(2){ background:#0f2d6d;}
.r_box_bg .org-reports .report-box:nth-child(3){ background:#174099;}
.r_box_bg .org-reports .report-box:nth-child(4){ background:#2c59b6;}
.r_box_bg .org-reports .report-box:nth-child(5){ background:#1c51c1;}

 @media screen and (max-width:1600px) {
  body table th.thdate{ width:195px !important;}
   .v_box{ width:24%; padding:10px; margin-right:1%;}
   .v_box a.nav-link{ padding:0;}
   .v_box p{ margin-bottom: 0;}
   .v_box img{ float:none; margin-bottom: 0;} 
   .v_box p strong{ font-size:20px; display: block; margin-bottom: 5px;}
   .v_box img{ max-width: 75px; margin-right:10px;}
    .v_box p{ font-size:14px; line-height: 18px;}
   }
   @media screen and (max-width:1400px) {
    body table th.thdate{ width:165px !important;}
    
    .r_box table#donation thead tr th{ font-size: 13px; font-weight: 500; padding:5px 10px;}
    .dataTables_wrapper table#donation thead input{ font-size: 13px;}  
   }   
  @media screen and (max-width:1300px) {	  
  .v_box{ width: 32%;}
  .db_img{ display: none;}
  .db_text{ width: 100%;}
  .r_sec-top{ flex-wrap: wrap;}
 }
 
 @media screen and (max-width:767px) {	
  .r_box_bg .org-reports{ flex-wrap: wrap;}
  .r_box_bg .org-reports .report-box{ width:100%; margin-bottom:15px; }
  .r_box_bg .org-reports .report-box:last-child{ margin-bottom:0;} 
  .v_box{ width: 48%;}  
  
 }
 @media screen and (max-width:576px) {	
  .welcome_sec img{ display: none;}
  .v_box{ width: 100%;}
  
 }