body { margin: 0; padding: 0; font-family: "League Spartan", serif; background: url('../../img/bg2.png') center center no-repeat; background-size: cover; min-height: 100vh; }
body.login { background: url('../../img/bg2.png') center center no-repeat; } 
ul { list-style: none; padding: 0; }
ul li,
button { -webkit-transition: all .5s cubic-bezier(.215,.61,.355,1); -moz-transition: all .5s cubic-bezier(.215,.61,.355,1); -o-transition: all .5s cubic-bezier(.215,.61,.355,1); transition: all .5s cubic-bezier(.215,.61,.355,1); font-family: "League Spartan", serif!important; }
a { color: initial; }

h1, h2, h3, h4, h5, h6 { font-family: "League Spartan", serif; }

:root { 
    --green-1: #86b721;
    --green-2: #009997;
    --green-3: #32a44f;
    --green-4: #008788;
    --green-5: #008b78;
}

div.dataTables_wrapper { padding: 0;}

.bg-primary { background: var(--green-4)!important; }
.bg-danger { background: var(--green-5)!important; }

.panel-danger .panel-head { background: #FFF!important; color: var(--green-4)!important; }

.panel-head-icon { color: var(--green-3)!important; }
.btn.btn-info { background: var(--green-2); border-color: var(--green-3); color: #FFF; }

.btn { font-family: "League Spartan", serif!important; padding-bottom: 4px; }

.btn.btn-primary { background: var(--green-3); border-color: var(--green-5); text-transform: uppercase; font-weight: 700; color: #FFF;     font-size: 1.2rem; } 
.btn.btn-primary.add-clone { font-weight: 700; color: #FFF; font-size: 0.8rem; }

.panel-head { padding: 0; margin: 15px 0; }
.panel-body { padding-left: 0px; padding-right: 0px; }
.panel { margin-bottom: 0px; }

.fa-solid.fa-bars { font-size: 30px; padding: 10px; float: left; cursor: pointer; border: solid 1px #dfdfdf; border-radius: 2px; }
.fa-solid.fa-bars:hover { background: #EFEFEF; }

.scrollbar::-webkit-scrollbar { width: 12px; height: 12px; }
.scrollbar::-webkit-scrollbar-track { background: #FFF; border-radius: 10px; }
.scrollbar::-webkit-scrollbar-thumb { background: #009997; border-radius: 10px; border: 3px solid #FFF; }
.scrollbar::-webkit-scrollbar-thumb:hover { background: #008788; }
.scrollbar::-webkit-scrollbar-corner { background: #f0f0f0; }

i[class^="i-"] { background-size: contain!important; }
i.i-home { background: url('../../img/i-home.svg') center center no-repeat; }
i.i-config { background: url('../../img/i-config.svg') center center no-repeat; }
i.i-filter { background: url('../../img/i-filter.svg') center center no-repeat; }
i.i-register { background: url('../../img/i-register.svg') center center no-repeat; }
i.i-project { background: url('../../img/i-project.svg') center center no-repeat; }
i.i-user { background: url('../../img/i-user.svg') center center no-repeat; }
i.i-users { background: url('../../img/i-users.svg') center center no-repeat; }
i.i-menu { background: url('../../img/i-menu.svg') center center no-repeat; }

i.i-home-w { background: url('../../img/i-home-white.svg') center center no-repeat; }
i.i-config-w { background: url('../../img/i-config-white.svg') center center no-repeat; }
i.i-filter-w { background: url('../../img/i-filter-white.svg') center center no-repeat; }
i.i-register-w { background: url('../../img/i-register-white.svg') center center no-repeat; }
i.i-project-w { background: url('../../img/i-project-white.svg') center center no-repeat; }
i.i-user-w { background: url('../../img/i-user-white.svg') center center no-repeat; }
i.i-users-w { background: url('../../img/i-users-white.svg') center center no-repeat; }
i.i-add-w { background: url('../../img/i-add-white.svg') center center no-repeat; }
i.i-list-w { background: url('../../img/i-list-white.svg') center center no-repeat; }

i.i-project-g { background: url('../../img/i-project-green.svg') center center no-repeat; }
i.i-plants-g { background: url('../../img/i-plants-green.svg') center center no-repeat; }
i.i-users-g { background: url('../../img/i-users-green.svg') center center no-repeat; }
i.i-services-g { background: url('../../img/i-services-green.svg') center center no-repeat; }
i.i-providers-g { background: url('../../img/i-providers-green.svg') center center no-repeat; }

.mainKrebs > div { min-height: 100px; }
.mainKrebs.login .container { padding-top: 13vh; }
.mainKrebs { height: 100vh; width: 100vw; }
.mainKrebs .mainBox { background: #FFF; border-radius: 18px; padding: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, .5) }
.mainKrebs.login .mainBox { background: url('../../img/bg-login.png') #FFF -4px -4px no-repeat; }
.mainKrebs:not(.login) { padding: 5vh 10vw; }
.mainKrebs:not(.login) .mainBox { min-height: 90vh;  }
.mainKrebs:not(.login) .mainBox > .row { padding: 6vh 4vw; }
.mainKrebs:not(.login) .mainBox > .row > div:nth-child(odd) {  }
.mainKrebs:not(.login) .mainBox > .row > div:nth-child(even) { }
.mainKrebs.login .mainBox .logo { max-width: 60%; margin-bottom: 50%; }
.mainKrebs.login .mainBox h1 { font-weight: 900; font-size: 2.6rem; margin: 0; }
.mainKrebs.login .mainBox p { margin-bottom: 20%; color: #999; }
.mainKrebs.login .mainBox p a { color: #006633; font-weight: 600; }
.mainKrebs.login .mainBox .formBox { padding: 6%; }
.mainKrebs.login .mainBox .videoBox > div { height: 70vh; border-radius: 12px; position: relative; overflow: hidden; }
.mainKrebs.login .mainBox .videoBox > div video { width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 0; }

.formBox form > * { width: 100%; }
.formBox form label { width: 100%; position: relative; margin-bottom: 20px; }
.formBox form input { width: 100%; padding: 6px 40px 6px 14px; border: solid 1px #dbdbdb; border-radius: 4px; }
.formBox form label span { background: #FFF; position: absolute; padding: 0px 10px; margin: -15px 5px 0px 8px; color: #006633; font-weight: 500; }
.formBox form i { position: absolute; right: 11px; top: 10px; font-size: 20px; color: #dbdbdb; }
.formBox form input:focus ~ i { color: #006633; }
.formBox form button { background: #006633; text-transform: uppercase; border-radius: 4px; border: none; color: #FFF; font-size: 22px; font-family: "League Spartan", serif; font-weight: 700; padding: 10px 0 5px 0; }

.mainKrebs:not(.login) .mainBox .desktop-menu { padding-right: 40px; }
.mainKrebs:not(.login) .mainBox .desktop-menu .logo { max-width: 70%; margin-bottom: 40px; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul { float: left; width: 100%; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul { background: #FFF; padding: 20px 8px 20px 20px; box-shadow: 0px 0px 12px rgba(0, 0, 0, .25); border-radius: 12px; height: 100%; margin-bottom: 0; max-height: 64vh; overflow: hidden; overflow-y: scroll; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li { float: left; width: 100%; padding: 15px; background: #EFEFEF; border-radius: 10px; margin-bottom: 10px; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li a { float: left; width: calc(100% - 40px); }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li:hover { background: #dbdbdb; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li a > * { float: left; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li p { margin: 0; padding: 6px 15px 0px 15px; font-weight: 500; }
.mainKrebs:not(.login) .mainBox .desktop-menu ul li i.fa-solid { float: right; font-size: 22px; margin: 4px 0px 4px 9px; color: #919191; } 
.mainKrebs:not(.login) .mainBox .desktop-menu ul li i[class^="i-"] { float: left; width: 30px; height: 30px; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul li ul { margin-top: 15px; padding-left: 20px; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul li ul li { background: #DDDDDD; padding: 8px 0px 8px 15px; border: solid 1px #EFEFEF; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul li ul li:hover { background: #C5C5C5; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul li ul li:last-child { margin-bottom: 0; }
.mainKrebs:not(.login) .mainBox .desktop-menu > ul li ul li i[class^="i-"] { float: left; width: 24px; height: 24px; }

.mainKrebs:not(.login) .mainBox .desktop-menu ul li ul li a { float: left; width: 100%; }

.mainKrebs:not(.login) .mainBox .desktop-menu ul li ul li p { width: calc(100% - 30px);  margin: 0; padding: 4px 15px 0px 10px; font-weight: 500; font-size: 13px; } 
.mainKrebs:not(.login) .mainBox .head { width: 100%; margin-bottom: 45px; }
.mainKrebs:not(.login) .mainBox .head > * {  }
.mainKrebs:not(.login) .mainBox .head button { background: #FFF; border: solid 1px #CCC; border-radius: 4px; margin: 10px; margin: 0px 0px 2px 20px; padding: 8px 12px 4px 12px; }
.mainKrebs:not(.login) .mainBox .head button i { color: #666; }
.mainKrebs:not(.login) .mainBox .head button:hover { background: #CCC; }
.mainKrebs:not(.login) .mainBox .head > div { text-align: right; }
.mainKrebs:not(.login) .mainBox .head > div > * { float: left; width: 100%; margin: 0; }
.mainKrebs:not(.login) .mainBox .head > div b { font-size: 1.2rem; }
.mainKrebs:not(.login) .mainBox .head > div p { margin-top: -10px; }
.mainKrebs:not(.login) .mainBox h1 { float: left; width: 100%; text-transform: uppercase; font-size: 2.5rem; font-weight: 700; }

.mainKrebs:not(.login) .mainBox .panel { float: left; width: 100%; background: none; box-shadow: none; }

.mainKrebs .mainBox .body .dashboard-links { width: 100%; overflow: hidden; padding-top: 30px; }
.mainKrebs .mainBox .body .dashboard-links li { float: left; width: calc(50% - 10px); margin-bottom: 20px; padding: 20px; overflow: hidden; border-radius: 10px; }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(even) { margin-left: 10px; }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(odd) { margin-right: 10px; }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(1n) { background: var(--green-1); }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(2n) { background: var(--green-2); }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(3n) { background: var(--green-3); }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(4n) { background: var(--green-4); }
.mainKrebs .mainBox .body .dashboard-links li:nth-child(5n) { background: var(--green-5); }
.mainKrebs .mainBox .body .dashboard-links li > div { float: left; width: 100%; } 
.mainKrebs .mainBox .body .dashboard-links li > div > * { float: left; color: #FFF; }
.mainKrebs .mainBox .body .dashboard-links li > div i { float: left; width: 56px; height: 56px; }
.mainKrebs .mainBox .body .dashboard-links li > div p { width: calc(70% - 56px); height: 58px; vertical-align: middle; font-size: 32px; margin-bottom: 0; padding: 5px 15px 0px 15px; line-height: 26px; display: flex; align-items: center; }
.mainKrebs .mainBox .body .dashboard-links li > div p b { font-weight: 600;  }
.mainKrebs .mainBox .body .dashboard-links li > div span { position: relative; width: 30%; text-align: center; }
.mainKrebs .mainBox .body .dashboard-links li > div span::after { position: absolute; top: -20px; left: -20px; display: block; content: ''; width: 2px; height: 50%; background: #FFF; }
.mainKrebs .mainBox .body .dashboard-links li > div span::before { position: absolute; bottom: -20px; left: -20px; display: block; content: ''; width: 2px; height: 50%; background: #FFF; }
.mainKrebs .mainBox .body .dashboard-links li > div span > * { }
.mainKrebs .mainBox .body .dashboard-links li > div span button { float: left; width: 50%; background: none; border: none; line-height: 14px; padding-top: 7px; opacity: .6; }
.mainKrebs .mainBox .body .dashboard-links li > div span button:hover { opacity: 1; }
.mainKrebs .mainBox .body .dashboard-links li > div span button i { float: initial; display: inline-block; width: 30px; height: 30px; }
.mainKrebs .mainBox .body .dashboard-links li > div span button u { display: inline-block; width: 100%; color: #FFF; text-decoration: none; font-size: 10px; }

.mainKrebs .mainBox .body .action-bts { margin-top: -65px; }
.mainKrebs .mainBox .body .action-bts button { margin-left: 10px; }
.mainKrebs .mainBox .body .action-bts .card-body { padding: 0!important; }

.desktop-menu li > ul { display: none; }
.desktop-menu label[for^="dropdown-"] { float: left; cursor: pointer; width: 40px; height: 30px; }
.desktop-menu input { display: none; }
.desktop-menu input[id^="dropdown-"]:checked ~ label ~ ul { display: block; }
.desktop-menu input[id^="dropdown-"]:checked ~ label .fa-chevron-right { --fa: "\f078"; }

.mainKrebs .mobile-desktop-menu { display: none; padding: 6px; position: fixed; width: 92%; bottom: 0px; background: #FFF; border-radius: 40px; left: 4%; box-shadow: 0px 0px 15px rgba(0,0,0,.5); }
.mainKrebs .mobile-desktop-menu li { width: 16.6%; height: 45px; width: 45px; border-radius: 100%; }
.mainKrebs .mobile-desktop-menu li i { width: 30px; height: 30px; display: inline-block; margin: 7px; opacity: .5; }
.mainKrebs .mobile-desktop-menu li:nth-child(1) i { margin-top: 5px; }
.mainKrebs .mobile-desktop-menu li.on { background: #32a44f; }
.mainKrebs .mobile-desktop-menu li.on i { opacity: 1; }

.in-tabs { list-style: none; padding: 0px; border-bottom: solid 1px #CCC; }
.in-tabs li { float: left; padding: 10px 25px 8px 25px; border: solid 1px #CCC; border-radius: 4px 4px 0 0; margin-left: 2px; margin-bottom: -1px; cursor: pointer;  font-family: "League Spartan", serif; }
.in-tabs li:hover { background: #EFEFEF; }
.in-tabs li.on { border-bottom: solid 1px #FFF }
.in-tabs li.on:hover { background: #FFF; }
.content-in-tabs > div { float: left; width: 100%; min-height: 100px; display: none; }
.content-in-tabs > div div { float: left; width: 100%; }
.content-in-tabs > div div._50 { width: calc(50% - 8px); }
.content-in-tabs > div div._33 { width: calc(33.3333% - 8px); }

.content-in-tabs > div div._50:nth-child(odd) { margin-right: 8px; }
.content-in-tabs > div div._50:nth-child(even) { margin-left: 8px; }

.content-in-tabs > div div._33:nth-child(1n-1) { margin-right: 8px; margin-left: 0px }
.content-in-tabs > div div._33:nth-child(2n-1) { margin-right: 4px; margin-left: 4px; }
.content-in-tabs > div div._33:nth-child(3n-1) { margin-left: 8px; margin-right: 0px; }

.content-in-tabs > div div.block { display: none; }
.content-in-tabs > div div.block.on { display: initial; }
.content-in-tabs button { float: right; }

.content-in-tabs .clone { display: none; }
.all-form { padding: 0 15px; }

.card.o-hidden .card-body { padding: 0!important; }

@media (max-width: 1200px){}
@media (max-width: 992px){
    .mainKrebs.login .container { padding-top: 0vh; }
    .mainKrebs.login .container > .row { padding: 8%; }
    .mainKrebs.login .mainBox h1 { font-size: 2.7rem; }
    .mainKrebs.login .mainBox p { margin-bottom: 10%; }
    .mainKrebs.login .mainBox .logo { margin-bottom: 16%; } 
    .mainKrebs.login .mainBox .videoBox > div { height: 20vh; }
    .mainKrebs.login .mainBox .videoBox { padding: 6%; }
    .mainKrebs:not(.login) { padding: 0; }
    .mainKrebs:not(.login) .mainBox { border-radius: 0px; }
    .mainKrebs:not(.login) .mainBox h1 {  }
    .mainKrebs .mainBox .body .dashboard-links li { padding: 10px; width: 100%; margin-right: 0px!important; margin-left: 0px!important; margin-bottom: 10px; }
    .mainKrebs .mobile-desktop-menu { display: block; }
    .mainKrebs .mainBox .body .dashboard-links { padding-top: 15px; }
    .mainKrebs .mainBox .body .dashboard-links li > div p { font-size: 20px; padding: 0px 15px; width: calc(72% - 56px); height: 42px;  line-height: 20px; }
    .mainKrebs .mainBox .body .dashboard-links li > div i { width: 40px; height: 40px; }
    .mainKrebs .mainBox .body .dashboard-links li > div span { width: 32%; }
    .mainKrebs .mainBox .body .dashboard-links li > div span button { padding-top: 0; }
    .mainKrebs .mainBox .body .dashboard-links li > div span button i { width: 22px; height: 22px; }
    .mainKrebs .mainBox .body .dashboard-links li > div span::after { top: -10px; left: -10px; }
    .mainKrebs .mainBox .body .dashboard-links li > div span::before { bottom: -10px; left: -10px; }
}
@media (max-width: 768px){}
@media (max-width: 440px){}