/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18 lug 2021, 10:47:12
    Author     : marco
*/

/**
* General
*/
.bg-green { background-color: #1DA24A }
#navbar_button_search::after { content: url( '/_media/search.svg' ); display: block; width: 20px; height: 20px; }
#navbar_button_search:hover::after { content: url( '/_media/search_hover.svg' ); display: block; width: 20px; height: 20px; }

.color-green { color: #1DA24A }
.color-green:hover { color: #1DA24A }
.color-white { color: #fff }
.color-white:hover { color: #fff }
.btn-green { background-color: #1DA24A; color: #fff; border-radius: 5px; border: 1px solid #1DA24A }
.btn-green a { color: #fff }
.btn-green:hover { background-color: #fff; color: #1DA24A}
.btn-green:hover a { color: #1DA24A; text-decoration: none }
.btn-grey { background-color: #6c757d; color: #fff!important; border-radius: 5px; border: 1px solid #6c757d }
.btn-grey a { color: #fff }/* 
.btn-grey:hover:not( .active ) { background-color: #fff; color: #6c757d }
.btn-grey:hover:not( .active ) a { color: #6c757d; text-decoration: none } */
.btn-square { border-radius: 0px; }
.btn-rounded { border-radius: 5px; }
.btn-red { background-color: red; border-color: red; color:white}
.btn-red:hover { background-color: white; border-color: red; color:red}
.page-green { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #1DA24A; background-color: #fff; border: 1px solid #dee2e6; }
.page-item.disabled .page-green { color: #6c757d; pointer-events: none; cursor: auto; background-color: #fff; border-color: #dee2e6; }
.page-item:first-child .page-green { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.page-green:hover { z-index: 2; color: #1DA24A; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; }
.loader { position: fixed; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }
.loader:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8)); background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8)); }
.loader:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; }
.text-green{ color: #1DA24A !important; }
/**
* Main
*/
body { background-color: #1DA24A; height: 100%; border-radius: 0;}
.jumbotron { border-radius: 0 }
.jumbotron-login, .jumbotron-reset { border-radius: 10px; }
.container-login, .container-reset { padding: 0px 100px 50px; border-radius: 10px; width: 50%; margin: auto}
.navbar-brand { cursor: pointer }

/**
* MODAL
*/
/* Important part */
@media (min-width: 576px){
    .modal-dialog {
        max-width: 800px;
    }
}

@media (min-width: 1200px){
    .modal-dialog {
        max-width: 1024px;
    }
}

/**
* Login & Reset Form
*/
#login_form > .form-group{position:relative}
#login_form > .form-group > label { position: absolute; z-index: 100; margin: 40px; font-size: 14px; }
#login_form > .form-group > #label-pass {  }
#login_form > .form-group > .input-group > input { height: 100px; border: 0; /* border: 1px solid #707070; */ background-color: #EFF6F9; padding-left: 30px; }
#login_form > .form-group > .input-group > input:focus { border-left: 8px solid #1DA24A !important; outline:0px !important; -webkit-appearance:none; box-shadow: none !important; border-color: #707070}

#reset_form > .form-group > label { position: absolute; z-index: 100; margin: 40px; font-size: 14px; }
#reset_form > .form-group > #label-pass { margin-top: 60px }
#reset_form > .form-group > .input-group > input { height: 100px; border: 0; /* border: 1px solid #707070; */ background-color: #EFF6F9; padding-left: 30px; }
#reset_form > .form-group > .input-group > input:focus { border-left: 8px solid #1DA24A !important; outline:0px !important; -webkit-appearance:none; box-shadow: none !important; border-color: #707070}

#change_form > .form-group > label { position: absolute; z-index: 100; margin: 40px; font-size: 14px; }
#change_form > .form-group > #label-pass { margin-top: 60px }
#change_form > .form-group > #label-retype-pass { margin-top: 60px }
#change_form > .form-group > .input-group > input { height: 100px; border: 0; /* border: 1px solid #707070; */ background-color: #EFF6F9; padding-left: 30px; }
#change_form > .form-group > .input-group > input:focus { border-left: 8px solid #1DA24A !important; outline:0px !important; -webkit-appearance:none; box-shadow: none !important; border-color: #707070}

.btn#login, .btn#reset, .btn#change { width: 100%; padding: 20px 0px }

/**
* Navbars
*/
nav { background-color: #fff; }
.dropdown-menu { border: 0 }
.nav-link { color: #1DA24A}
.nav-link:hover { color: #1D9000 }
.dropdown-menu a { color:#999 }
.dropdown-item.active, .dropdown-item:active { background-color:#1DA24A; border-radius: 5px; }
.icon { padding: 10px; min-width: 40px; right: 0; }

/**
* Page
*/
.sidebar { flex: 20%; max-width: 20%; }
.sidebar-container { height: 100vh; border-right: 2px solid #ccc; bottom: 0; }

.sidebar * { white-space: normal;}
.body { flex: 80%; max-width: 80%; padding-top: 10px; padding-bottom: 20px; padding-left: 10px; padding-right: 0; }
.box {  flex: 30%; border: 1px solid #999; border-radius: 5px; margin: 10px 5px; padding: 15px; }


.hamburger{ position: relative; width: 70px; height: 70px; background-color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; }
.hamburger span{position: absolute; width: 40px; height: 4px; background-color: #1da24a; border-radius: 4px; transition: 0.5s; transform: translateX(3px); }
.hamburger span:nth-child(1){transform: translateY(-15px); width: 25px; left: 15px; }
.hamburger.attivo span:nth-child(1){transform: translateY(0px) rotate(45deg); width: 40px; transition-delay: 0.125s; }
.hamburger span:nth-child(2){transform: translateY(15px); width: 15px; left: 15px; }
.hamburger.attivo span:nth-child(2){transform: translateY(0px) rotate(315deg); width: 40px; transition-delay: 0.25s; }
.hamburger.attivo span:nth-child(3){transform: translateX(60px); }
@media(max-width:992px){
    .body{flex: 100% ;max-width: 100%; }
    .sidebar{flex: 30%; max-width: 30%; position:fixed; left: -30%; transition: left .66s; background-color: white; z-index: 9; }
    .sidebar.attivo{left: 0%; }
}
@media(min-width:992px){
    .hamburger{display: none; }
}

/**
* PAGE PROFILE
*/
.box-sheet{ border: 1px double #00000020; width: 800px; margin-bottom: 20px; border-radius: 5px; }
/*input[type=date]::-webkit-datetime-edit-text { -webkit-appearance: none; display: none; }
input[type=date]::-webkit-datetime-edit-month-field{ -webkit-appearance: none; display: none; }
input[type=date]::-webkit-datetime-edit-day-field { -webkit-appearance: none; display: none; }
input[type=date]::-webkit-datetime-edit-year-field { -webkit-appearance: none; display: none; }*/
.dot{ height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; }
.form-error{ background-color: #ff6565; padding: 5px; border-radius: 5px;}
.goup{ position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: #1DA24A; color: white; cursor: pointer; padding: 15px; border-radius: 10px; font-size: 18px; }
.traffic-light{ width: 30px; height: 30px; border-radius: 50%; cursor: default !important }
.traffic-light.btn-green:hover {  background-color: #1DA24A }
.traffic-light.btn-red:hover {  background-color: red }

/**
* SPINNER
*/
span.elettro-loading svg { width:30px; height:auto}
span.elettro-loading svg path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 2s linear infinite; stroke: white; }
#button_apply_filter:hover span.elettro-loading svg path { stroke: #1DA24A; }

div.elettro-loading svg { width:auto; height:auto; position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%);}
div.elettro-loading svg path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 2s linear infinite; stroke: #157a37; }
@keyframes dash { to { stroke-dashoffset: 0; } }

label.form-error{color:#FFF !important}

#login_form > .form-group > label {
    top:0;
}

#login_form > .form-group > label.act {
   margin-top:16px
}
#login:disabled{opacity:0.4; cursor: not-allowed;background-color: #1DA24A !important;
    color: #fff !important;}
    .dnone{display:none}