﻿* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
}

html, body {
   min-height: 100%;
   height: 100%;
}

/**Firefox*/
.custom-scrollbar {
   overflow-y: auto;
   scrollbar-width: thin;
}
   /**Webkit Browser: Google und Opera getestet*/
   .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
   }

   .custom-scrollbar::-webkit-scrollbar-track {
      background: #f1f1f1;
   }

   .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #cdcdcd;
   }

      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
         background: #a6a6a6;
      }

.pointer {
   cursor: pointer;
}

#wrapper {
   position: relative;
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

#main-area {
   transition: margin .3s;
   display: flex;
   flex-direction: column;
   flex: 1;
   position: relative;
}

#wrapper .sidebar-left-open {
   margin-left: 230px;
}

#main-header {
   background-color: #f7fafc;
   position: sticky;
   top: 0px;
   z-index: 99;
   transition: margin .3s;
}

   #main-header .custom-navbar > .nav-item > .nav-link {
      padding-left: .75rem;
      padding-right: .75rem;
      color: #666666;
      margin-right: 2px;
   }

      #main-header .custom-navbar > .nav-item > .nav-link:hover,
      #main-header .custom-navbar > .nav-item > .nav-link:active,
      #main-header .custom-navbar > .nav-item > .nav-link:focus {
         background-color: #d9dee166;
      }

   #main-header .dropdown-menu .dropdown-icon {
      padding-right: 1rem;
      vertical-align: middle;
   }

   #main-header .dropdown-menu .dropdown-item {
      color: #666666;
   }

#main-footer {
   background-color: #f7fafc;
   position: relative;
}

#main-content {
   background-color: #f7fafc;
   position: relative;
   flex: 1;
}

#main-sidebar-left {
   position: fixed;
   background-color: #fff;
   top: 0px;
   bottom: 0px;
   width: 230px;
   margin-left: -230px;
   z-index: 999;
   display: flex;
   flex-direction: column;
   transition: margin .3s;
   box-shadow: 0 0 1rem 0 rgba(136, 152, 170, 0.6);
}

   #main-sidebar-left:not(.sidebar-left-expand) {
      box-shadow: none;
   }

   #main-sidebar-left > .sidebar-left-branding {
      position: relative;
      min-height: 50px;
   }

      #main-sidebar-left > .sidebar-left-branding .logo {
         background-color: #f7fafc;
      }

   #main-sidebar-left > .sidebar-left-content {
      position: relative;
      flex: 1;
   }

   #main-sidebar-left .nav-link {
      display: flex;
      white-space: nowrap;
      align-items: baseline;
      padding-left: 1rem;
      padding-right: 1rem;
      color: #666666;
   }

      #main-sidebar-left .nav-link:hover, #main-sidebar-left .nav-link:active, #main-sidebar-left .nav-link:focus {
         background-color: #f7fafc;
      }

      #main-sidebar-left .nav-link[data-toggle="collapse"]::after {
         font-family: 'Font Awesome 5 Pro';
         font-weight: 700;
         font-style: normal;
         font-variant: normal;
         display: inline-block;
         margin-left: auto;
         content: '\f105';
         transition: all .15s ease;
         text-rendering: auto;
      }

      #main-sidebar-left .nav-link[data-toggle="collapse"][aria-expanded="true"]::after {
         transform: rotate(90deg);
      }

   #main-sidebar-left .navbar-nav .nav-icon {
      width: 2rem;
   }

@media(max-width: 991.99px) {
   #wrapper .sidebar-left-open {
      margin-left: 0px;
   }

   #main-sidebar-left.sidebar-left-expand-mini-device {
      margin-left: 0px;
      box-shadow: 0 0 1rem 0 rgba(136, 152, 170, 0.6) !important;
   }

   #main-sidebar-left.sidebar-left-expand {
      box-shadow: none;
   }
}

@media(min-width: 992px) {
   #main-sidebar-left.sidebar-left-expand {
      margin-left: 0px;
   }
}

#imgCompany {
   height: 40px;
   background-color: white;
}

/*
    #########################
    ### FULJOYMENT COLORS ###
    #########################
*/

.bg-aqua {
   background-color: #bee2e9;
}

.bg-orange {
   background-color: #ec6608;
}

.bg-orange-light {
   background-color: #FD9D5D;
}

.bg-blue-dark {
   background-color: #1d71b8;
}

.bg-blue-light {
   background-color: #e9f5fc;
}

.text-blue {
   color: #36a9e1;
}

.text-aqua {
   color: #bee2e9;
}

.text-orange {
   color: #ec6608;
}

.text-orange-light {
   color: #fde2ce;
}

.text-blue-dark {
   color: #1d71b8;
}

.text-blue-light {
   color: #e9f5fc;
}

.text-blue {
   color: #36a9e1;
}

/*
   ##############################################
   ### ASP VALIDATION EROOR STYLE 4 BOOTSTRAP ###
   ##############################################
*/

.field-validation-error {
   font-size: 0.75rem;
   font-weight: bold;
   color: #d9534f;
}

.input-validation-error {
   border-color: #d9534f;
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
   #################
   ### Dashboard ###
   #################
*/

@keyframes popup {
   from {
      background-color: rgba(255, 255, 255, 0.8);
   }

   to {
      background-color: rgba(253, 226, 206, 1);
      color: black !important;
   }
}

.card-dashboard {
   background-color: rgba(255, 255, 255, 0.95);
}

.card-dashboard:hover {
   animation-name: popup;
   animation-duration: 500ms;
   animation-fill-mode: forwards;
}

.card-dashboard:hover i {
   font-size: larger;
}
/*
    ##########################
    ### BOOSTRAP EXTENSION ###
    ##########################
*/
/* LIGHT COLORS */
.text-primary-light {
   color: rgba(2, 117, 216, 0.3);
}

.text-secondary-light {
   color: rgba(41, 43, 44, 0.3);
}

.text-success-light {
   color: rgba(92, 184, 92, 0.3);
}

.text-danger-light {
   color: rgba(217, 83, 79, 0.3);
}

.text-warning-light {
   color: rgba(240, 173, 78, 0.3);
}

.text-info-light {
   color: rgba(91, 192, 222, 0.3);
}

.text-muted-light {
   color: rgba(153,153,153, 0.3);
}

.bg-primary-light {
   background: rgba(2, 117, 216, 0.3);
}

.bg-secondary-light {
   background: rgba(41, 43, 44, 0.3);
}

.bg-success-light {
   background: rgba(92, 184, 92, 0.3);
}

.bg-danger-light {
   background: rgba(217, 83, 79, 0.3);
}

.bg-warning-light {
   background: rgba(240, 173, 78, 0.3);
}

.bg-info-light {
   background: rgba(91, 192, 222, 0.3);
}


/* RESPONSIVE WIDTH FOR TAG 'sm'*/
@media screen and (max-width: 768px) {
   .w-sm-100 {
      width: 100%;
   }

   .w-sm-75 {
      width: 75%;
   }

   .w-sm-50 {
      width: 50%;
   }

   .w-sm-25 {
      width: 25%
   }
}

@media screen and (max-width: 576px) {
   .w-xs-100 {
      width: 100%;
   }

   .w-xs-75 {
      width: 75%;
   }

   .w-xs-50 {
      width: 50%;
   }

   .w-xs-25 {
      width: 25%
   }
}

.btn-outline-orange {
   color: #ec6608;
   border-color: #ec6608;
}

.btn-outline-orange:hover {
   background-color: #ec6608;
   color: white;
}

.border-1 {
   border-width: 0.1rem !important;
}

.border-2 {
   border-width: 0.2rem !important;
}

.border-3 {
   border-width: 0.3rem !important;
}

.border-4 {
   border-width: 0.4rem !important;
}

/* FORMS */

.form-title {
   font-style: italic;
   font-size: large;
}
