/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

body {
    margin: 0;
    font-family: "Montserrat", Helvetica, Arial, serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: #0e0f0f;
    text-align: left;
    background-color: #f8f8f8;
    background-image: url("../app-assets/images/background/marble-2.jpg");
    background-position: center;
    background-size: cover; 
}

.vl {
    border-right: 20px;
    border-right-color: #0C102A;
    border-right-style: solid;
    min-height: 100%;
  }



.navbar-floating .navbar-container {
    box-shadow: 3px 3px 6px rgba(0, 0, 0.5, 2);
}

.text-green {
  color: #226B80 !important; }

  .nav-tabs .nav-link.active {
    position: relative;
    color: #517da8;
}

.nav-tabs .nav-link:after {
    background: linear-gradient(30deg, #517da8, rgba(41, 67, 92, 0.5)) !important;
    transition: transform 0.3s;
    transform: translate3d(0, 150%, 0);
}


/* ------------------------ Custom Sidebar ----------------------------- */ 

.main-menu .navbar-header .navbar-brand .brand-text {
    font-size: 30px; 
    padding-top: 4px;
    color: #FFFFFF;
    text-shadow: 1px 1px 3px #3300ff;
    text-align: center;
    padding-left: 50px;
}

.main-menu.menu-dark {
    color: #FFFFFF;
    background: #0C102A;
    /*background: #2D283E;*/
    box-shadow: 6px 6px 5px rgba(0, 0, 0.5, 2); 
    border-top-right-radius: 20px;
    border-color: white;
}

.main-menu.menu-dark .navigation {
    color: #FFFFFF;
    background: #0C102A;
}

.main-menu.menu-dark .navigation > li.active > a {
  background : #FFFFFF;
  box-shadow : 0 0 8px 1px rgba(0,0,0, 0.5);
  color : #0C102A;
  font-weight : 400;
  border-radius : 5px;
  margin-right: 0;
}
.semi-dark-layout .main-menu-content .navigation-main .nav-item a:after, .semi-dark-layout .main-menu-content .navigation-main .nav-item a {
    color: #FFFFFF;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
    background: #0C102A;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a {
    background: #0C102A;
}

.semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active a {
  background: #FFFFFF;
  border-radius: 4px; }

.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
    color: #0C102A;
    background: #FFFFFF;
    border-radius: 6px;
}

.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content .active .menu-item {
    background: #FFFFFF;
    color: #0C102A;
}

.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
    color: #0C102A;
    background: #FFFFFF;
    border-radius: 6px;
}
.main-menu.menu-dark .navigation > li ul .active {
  background : linear-gradient(118deg, #7367F0, rgba(85, 110, 83, 0.7));
  box-shadow : 0 0 10px 1px rgba(85, 110, 83, 0.7);
  color: #0C102A;
}

.main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-dark .navigation > li.sidebar-group-active > a {
   background: #FFFFFF !important;
  color: #0C102A  !important;
}

  .semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a {
  background-color: #FFFFFF; 
  box-shadow: none;
}

  .semi-dark-layout .menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a {
  background: #FFFFFF !important;
  color: #0C102A  !important; }

  .semi-dark-layout .main-menu-content .navigation-main .active .menu-title, .semi-dark-layout .main-menu-content .navigation-main .active i {
    color: #0C102A;

}

/* ---------------------- End of Custom Sidebar ---------------------*/  


/* ---------------------- Custom Button ------------------------------*/ 

  .btn-green {
  border-color: #226B80 !important;
  background-color: #226B80 !important;
  color: #fff !important; }

.btn-green:focus, .btn-green:active, .btn-green.active {
  color: #fff;
  background-color: #0b242b !important; }

.btn-green:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #0b242b; }

.btn-green:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }


  .btn-outline-green {
  border: 1px solid #226B80 !important;
  background-color: transparent;
  color: #226B80; }

.btn-outline-green:hover:not(.disabled):not(:disabled) {
  background-color: rgba(115, 156, 114, 0.04);
  color: #226B80; }

.btn-outline-green:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.btn-outline-green:not(:disabled):not(.disabled):active, .btn-outline-green:not(:disabled):not(.disabled).active, .btn-outline-green:not(:disabled):not(.disabled):focus {
  background-color: rgba(115, 156, 114, 0.2);
  color: #226B80; }

.btn-outline-green.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='green' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }

.show > .btn-outline-green.dropdown-toggle {
  background-color: rgba(115, 156, 114, 0.2);
  color: #226B80; }


  .btn-blue {
  border-color: #517da8 !important;
  background-color: #517da8!important;
  color: #fff !important; }

.btn-blue:focus, .btn-blue:active, .btn-blue.active {
  color: #fff;
  background-color: #3f523d !important; }

.btn-blue:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #587857; }

.btn-blue:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }


  .btn-outline-blue {
  border: 1px solid #29435C !important;
  background-color: transparent;
  color: #29435C; }

.btn-outline-blue:hover:not(.disabled):not(:disabled) {
  background-color: rgba(81, 125, 168, 0.04);
  color: #29435C; }

.btn-outline-blue:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.btn-outline-blue:not(:disabled):not(.disabled):active, .btn-outline-blue:not(:disabled):not(.disabled).active, .btn-outline-blue:not(:disabled):not(.disabled):focus {
  background-color: rgba(81, 125, 168, 0.2);
  color: #29435C; }

.btn-outline-blue.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='blue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }

.show > .btn-outline-blue.dropdown-toggle {
  background-color: rgba(81, 125, 168, 0.2);
  color: #29435C; }

a {
    color: #226B80;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
  color: #2f402f;
  text-decoration: none; 
}

.badge-blue {
    color: #FFFFFF;
    background-color: #517da8;
}


/* ---------------------- End of Custom Button --------------------- */


/* ---------------------- Custom Dropdown, Toggle Switch and Tab --------------------- */

.dropdown-item:hover, .dropdown-item:focus {
  color: #226B80;
  text-decoration: none;
  background-color: rgba(115, 156, 114, 0.12); }

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #226B80; }

.dropdown-item:hover, .dropdown-item:focus {
  color: #226B80;
  text-decoration: none;
  background-color: rgba(115, 156, 114, 0.12); }


.custom-switch-green .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #226B80 !important;
  color: #fff;
  transition: all 0.2s ease-out; }


  .nav-pills .nav-link.active {
    border-color: #00cfe8;
    box-shadow: 0 4px 18px -4px rgb(81 125 168 / 65%);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #00cfe8;
}

/* ---------------------- End of Custom Dropdown, Toggle Switch and Tab --------------------- */


/* ---------------------- Custom Datatable --------------------- */

.page-item.active .page-link {
    z-index: 3;
    border-radius: 5rem;
    background-color: #226B80;
    color: #fff !important;
    font-weight: 600;
}

/* ---------------------- End of Custom Datatable --------------------- */


/* ---------------------- Custom Calendar --------------------- */


.flatpickr-calendar .flatpickr-day.today {
    border-color: #226B80;
}

.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover {
    background: #226B80;
    color: #FFF;
    border-color: #226B80;
}

.fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button) {
    background-color: transparent;
    border-color: #226B80 ;
    color: #226B80;
}

.fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active, .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover {
    background-color: rgba(115, 156, 114, 0.2) !important;
    border-color: #226B80 !important;
    color: #226B80;
}

/* ---------------------- End of Custom Calendar --------------------- */


/* ---------------------- Custom Form Components --------------------- */

  .form-control:focus {
  color: #6e6b7b;
  background-color: #fff;
  border-color: #226B80;
  outline: 0;
  box-shadow: 0 3px 10px 0 rgba(115, 156, 114, 0.1); }

.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
    border-color: #226B80;
    box-shadow: none;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: #226B80;
  box-shadow: 0 3px 10px 0 rgba(115, 156, 114, 0.1); }


  .select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #226B80 !important;
    border-color: #226B80 !important;
    color: #FFFFFF;
    padding: 2px 5px;}

    .select2-container--classic .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option[aria-selected='true'] {
    background-color: #226B80 !important;
    color: white !important;
}

  .select2-container--classic.select2-container--open, .select2-container--default.select2-container--open {
  box-shadow : 0 5px 25px rgba(115, 156, 114, 0.1); }

   .select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
  color: #226B80;
  outline : 0;
  border-color : #226B80 !important;
  box-shadow : 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important; }

  .select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color :#226B80 !important;
  border-color : #226B80 !important;
  color : #FFFFFF;
  padding : 2px 5px;
}

.select2-container--classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted {
  background-color : rgba(115, 156, 114, 0.12) !important;
  color : #226B80 !important;
}

.select2-container--classic.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #226B80 !important;
    border-top-color: rgb(115, 156, 114) !important;
    border-right-color: rgb(115, 156, 114) !important;
    border-bottom-color: rgb(115, 156, 114) !important;
    border-left-color: rgb(115, 156, 114) !important;
    outline: 0;
}


.dropzone {
    min-height: 200px;
    border: 2px dashed #226B80;
    background: #f8f8f8;
    position: relative;
}

.dropzone .dz-message {
	font-size: 1rem;
    color: #226B80;
}

.dropzone .dz-message:before {
	visibility: hidden;
	content: '';
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' stroke='%237367f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E);
    color: #226B80;
    width: 40px;
    height: 40px;
}

.custom-control-blue .custom-control-input:checked ~ .custom-control-label::before, .custom-control-blue .custom-control-input:active ~ .custom-control-label::before {
    border-color: #517da8;
    background-color: #517da8;
}

/* ---------------------- End Custom Form Components --------------------- */

.img-fluid {
    width: 100%;
    height: 350px;
}

.card-revenue-budget .budget-wrapper {
    padding: 2rem 3rem;
    text-align: left;
}

/* ====== Custom Scroll for Tenant Dashboard Timeline CSS ======== */

  .scroll { 
    max-height: 400px;
    overflow-y: auto;
  }

/* ====== End of Custom Scroll for Tenant Dashboard Timeline ======== */

.todo-application .content-area-wrapper .content-right .todo-task-list-wrapper {
    height: 100% ;
    
}

.todo-application .content-area-wrapper .content-right .todo-app-list {
    box-shadow: 3px 3px 10px rgba(0, 0, 0.5, 2);
}

html .navbar-floating.footer-static .app-content .content-area-wrapper, html .navbar-floating.footer-static .app-content .kanban-wrapper {
  height: 100% ;
}

.navbar-floating .header-navbar-shadow {
    background: none;
}


.swiper-centered-slides.swiper-container .swiper-slide {
    text-align: center;
    font-weight: 200;
    background-color: #fff;
    border-radius: 10px;
    height: auto;
    width: auto !important;
    cursor: pointer;
}

.swiper-centered-slides-2.swiper-container .swiper-slide.swiper-slide-active {
    color: #fff;
    background-color: #00cfe8 !important;
    box-shadow: 0 3px 6px 0 rgb(115 103 240 / 50%) !important;
}

.bg-dark-blue {
  background: #0C102A;
}


.datetime{
  color: #fff;
  background: #10101E;
  font-family: "Segoe UI", sans-serif;
  width: 100%;
  padding: 15px 10px;
  border: 3px solid #2E94E3;
  border-radius: 5px;
  transition: 0.5s;
}

.datetime:hover{
  background: #10101E;
  box-shadow: 0 0 30px #10101E;
}

.date{
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time{
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time span:not(:last-child){
  position: relative;
  margin: 0 6px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time span:last-child{
  background: #2E94E3;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 0 5px;
  border-radius: 3px;
}

.modal-slide-in .modal-dialog.sidebar-lg {
    width: 50rem;
}