@import url('https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css');
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);

html,body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

body {
    display: flex;
    flex-direction: row;
    min-height: 100%;
    font-family: 'lato', sans-serif;
    padding-top: 5px;
}

/*************************************************************************************
 *************************** LEFT BLOCK *********************************************
*************************************************************************************/
.main {
    width: 500px;
    display: flex;
    flex-direction: column;
}

.control {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
    background-color: #fff;
}

.online-main, .hide-main, .report-main {
    height: 24px;
}

.online-main, .report-main {
    margin-right: 10px;
}

.hide-main {
    margin-left: auto;
}

.but-build-trip, .but-findcar, .but-build-report {
    height: 24px;
}

.but-build-report {
    display: none;
}

.online-main:hover, .hide-main:hover, .but-build-trip:hover, .but-findcar:hover, .report-main:hover, .admin-panel:hover, .but-build-report:hover, .close-rep:hover {
    background-color: rgb(230, 233, 229);
}

.period-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 8px;
}

.oneday {
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.container-one-day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
}

.showperiod {
    border: 1px solid #000000;
    border-radius: 10px;
    height: 20px;
    padding-left: 1px;
    padding-right: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showperiod:hover {
    background-color: rgb(224, 229, 231);
}

.date {
    border-radius: 8px;
}

.period {
    display: flex;
    flex-direction: column;
    display: none;
    padding-bottom: 1px;
}

.container-start, .container-end {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}

.cap-date {
    min-width: 60px;
}

.container-check-all, .container-gorup, .container-find, .container-select-report {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 5px;
}

.container-select-report {
    display: none;
}

#selectRep {
    font-size: 16px;
    border-radius: 10px;
    padding: 3px;
}

.but-findcar {
    margin-left: 10px;
}

#findcar {
    font-size: 16px;
}

.checkall, .group {
    border: 1px solid #000000;
    border-radius: 10px;
    height: 20px;
    padding-left: 1px;
    padding-right: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.checkall:hover, .group:hover {
    background-color: rgb(224, 229, 231);
}

.container-cars {
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    padding: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.container-one-car {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
}

.container-one-car:hover {
    background-color: rgb(224, 229, 231);
}

.filials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #000000;
    border-radius: 10px;
    cursor: pointer;
}

.hidecar {
    display: none;
}

.filialcar {
    margin-left: 15px;
}


/*************************************************************************************
 *************************** RIGHT BLOCK *********************************************
*************************************************************************************/


.main-map {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.menu-map {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.show-main {
    display: none;
    height: 24px;
}

.show-main:hover {
    background-color: rgb(230, 233, 229);
}

.img-exit {
    height: 24px;
}

.img-exit:hover {
    background-color: rgb(240, 210, 210);
}

.map, .report {
    height: 100%;
    width: 100%;
    position: relative;
}

.report {
    display: none;
    overflow: auto;
}

.close-rep {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

.save-excel {
    position: absolute;
    left: 5px;
    top: 5px;
    height: 24px;
    width: 24px;
    display: none;
}

.table-rep {
    margin-top: 40px;
}


/*************************************************************************************
 *************************** Utils BLOCK *********************************************
*************************************************************************************/


.find-win {
    border: 3px outset gray; 
    background: white;
    top: 45%; 
    right: 0;
    left: 0;
    font-size: 14px; 
    margin: 0 auto;
    z-index:9999; 
    display: none;  
    position: fixed; 
    padding: 15px;
    border: 1px solid black;
    border-radius: 10px;
}

#shadow { 
    position: fixed;
    width:100%;
    height:100%;
    z-index:1; 
    background:#000;
    opacity: 0.5; 
    left:0;
    top:0;
}

.distmodalwin {
    width: 50%;
    background: white;
    top: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    text-align: center;
    z-index: 5;
    margin: auto;
    display: none;  
	border-radius: 10px;
	opacity: 0.7;		
    padding: 5px;
    border: 1px solid black;
    position: absolute;
}
@media screen and (max-width: 30em) {
	.distmodalwin {
		width: 75%;
		font-size: 10px;
		top: 7%;			
    }
    .main {
        display: none;
    }
    .show-main {
        display: block;
    }
}

.close-dist {
    position: absolute;
    cursor: pointer;
    right: 0px;
    top: 0px;
    margin: 2px;
    height: 16px;
    width: 16px;
    font-size: 10px;
    padding: 0px;
    border: 0px;
}

#modalwinsavereport { 
    height: 30px;  
    width: 200px;
    border: 3px outset gray; 
    background: white;
    top: 45%; 
    right: 0;
    left: 0;
    font-size: 18px; 
    margin: 0 auto;
    z-index:9999; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; 
    padding: 15px;
    border: 1px solid black;
    border-radius: 10px;
    text-decoration: none;
    color: #000;
}


/********************************************/
.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

    top: 45%; 
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index:9999; 
    display: none;  
    position: fixed; 
  }
  .lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid #cef;
    border-color: #cef transparent #cef transparent;
    animation: lds-hourglass 1.2s infinite;
  }
  @keyframes lds-hourglass {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
  }