@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

body {margin:0; padding:0; background: #082D51 url(../img/bg.jpg) repeat-x scroll left top;}

body * {box-sizing: border-box; font-family: 'Roboto', arial; outline: none;}

a {color: #333; text-decoration: none;}

figure {margin: 0;}
figure img {width: 100%;}

*:first-child {margin-top: 0;}
*:last-child {margin-bottom: 0;}

/*main {width: 940px; margin: 0 auto;}*/

header img {display: block; height: 58px;}

ul.clear {margin: 0; padding: 0; list-style: none;}

h2 {font-size: 13px; text-transform: uppercase;}

/*- LOADING ---*/

    .loading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      -webkit-animation: ellipsis steps(4,end) 900ms infinite;
      animation: ellipsis steps(4,end) 900ms infinite;
      content: "\2026"; /* ascii code for the ellipsis character */
      width: 0px;
    }

    @keyframes ellipsis {
      to {
        width: 1.25em;
      }
    }

    @-webkit-keyframes ellipsis {
        to {
            width: 1.25em;
        }
    }

    #page_loading {position: absolute; width: 84px; left: 50%; margin-left: -187px; top: 50%; margin-top: -20px; font-size: 14px;
        color: #fff;}
    .minimal #page_loading {margin-left: -72px;}

/*- ELEMENTS ---*/
    a.edit {background: url(../img/icon_edit80.png) no-repeat center center; background-size: contain; display: inline-block;
        width: 35px; height: 35px; max-width: 50%;}
    a.view {background: url(../img/icon_view80.png) no-repeat center center; background-size: contain; display: inline-block;
        width: 35px; height: 35px; max-width: 50%;}
    a.import {background: url(../img/icon_import80.png) no-repeat center center; background-size: contain; display: inline-block;
        width: 35px; height: 35px; max-width: 50%;}

    button {position: relative; min-height: 35px; border: 0; display: inline-block; margin: 0;
        background: transparent; text-transform: uppercase; cursor:pointer; font-size: 12px;}
    button:hover {color:#fff;}
    button:hover:before {content:''; position: absolute; left:0; right:0; top:0; bottom:0; background: rgba(0, 0, 0, 0.1);}
    button:hover:active {background: rgba(0, 0, 0, 0.2);}
    button.danger {background: #e00; color:#fff;}
    button.primary {background: #FCCB0D; background: #4F86AF; color: #fff;}
    button.disabled {color: gray; cursor: not-allowed;}
    button.disabled:hover {color: gray;}
    button.disabled:hover:before {background: transparent;}

    .command-bar {position: absolute; bottom: 0; left: 0; right: 0; background: #b4bdc0;}
    .command-bar button {width: 50%; height: 50px; border: 0; display: inline-block; margin: 0;
        position: relative; text-transform: uppercase; float: left;}
    .command-bar.triple button {width: 33.3%;}

    .btn {border: 1px solid transparent; display: inline-block; float: left;}
    .btn:hover {border:1px solid #CBCFD3; background-color: #E3E3E4; border:1px solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.1);}
    .btn.empty:hover {border:0; background: none;}
    .btn.active {background-color: #fff; border:1px solid #FCCB0D;}
    .btn:active {background-color: #fff;}
    .btn.disabled {opacity: 0.5; cursor: not-allowed;}
    .btn.disabled:hover {border:0; background-color: transparent;}

    .btn-swap {position: absolute; width: 59px; height: 50px; left: 0; bottom: 0; background: #B4BDC0;}
    .btn-swap::before {content:'\25B8'; font-size: 31px; width: 100%; text-align: center; line-height: 50px; display: block;}
    .minimal .btn-swap::before {content:'\25C2';}

    .btn-city {position: absolute; width: 59px; height: 50px; left: 0; bottom: 51px;
        background: url(../img/icon_city80.png) #B4BDC0 no-repeat center center; background-size: contain;}

    .btn-toggle {height: 22px; overflow: hidden; width: 55px; padding-left: 20px;}
    .btn-toggle img {width: 34px; margin: 0 auto; position: relative;}
    .btn-toggle.active {background-color: none; border: 0;}
    .btn-toggle.active img {top:-18px;}
    .btn-toggle.icon {background: url(../img/icons/ico05.png) no-repeat top left; background-size: contain;}
    .btn-toggle.detail {background: url(../img/icons/ico-7.png) no-repeat top left; background-size: contain;}

/*- LAYOUT ---*/

    #popUpTooltip {position: absolute; bottom: 0; left: 0; font-size:12px; padding:3px 5px; text-transform: uppercase;
        display: none; z-index: 1001; background: #E7ECEE; color:#333; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}

    #myTool {position: fixed; bottom: 25px; left: 25px; display: none;}
    #myTool > button {position: inline-block; width: 50px; height: 50px; font-size: 10px; text-transform: uppercase; color:#fff;
        background: #4F86AF; line-height: 50px; text-align: center; margin-right: 15px; border-radius: 50%; border: 0;
        -webkit-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);}

/*- TABLE ---*/
    .table { margin-top: 9px; background: #4F86AF; overflow: hidden; position: relative;}
    .table > div {overflow-y:auto; max-height:300px; margin-top: 35px; border-bottom: 2px solid #4F86AF;}
    .table table {width: 100%; font-size: 13px; background: #fff;
        border-collapse:collapse;}
    .table table th {padding: 0 9px; text-align: left; text-transform: uppercase; font-weight: normal; line-height: 17px;}
    .table table th:first-child {width: 25px;}
    .table table th>div {position: absolute; top: 10px; color:#fff;}
    .table table td {padding: 9px;  text-align: left; border-bottom: 1px solid #B4BDC0; min-width: 55px;}
    .table table td:first-child {width: 25px; min-width: 35px; text-align: center;}
    .table table td.cmd {padding: 3px 9px; width: 90px; text-align: center;}
    .table table tr:last-child td {border-bottom: 0;}
    .table table tr.placeholder td {border-bottom: 0;}
    .table table tr:nth-child(even) td {background: #EEEEEE;}
    .table table tr {cursor: pointer;}
    .table table tr:hover td {background: rgba(255, 206, 86, 0.2); background: rgba(54, 162, 235, 0.2);}
    /*- border-left ---*/
        .old .table table td + td {border-left: 2px solid #f6f6f7;}
        .old .table table tr:nth-child(even) td + td {border-left: 2px solid #fff;}
        .old .table table tr td:first-child {border-left:2px solid transparent;}
        .old .table table tr:hover td {border-left-color: #FCCB0D;}
        .old .table table tr:hover:nth-child(even) td + td {border-left: 2px solid #FCCB0D;}

/*- COMMAND COLUMNS ---*/
    #tool {position: fixed; top: 0; width: 230px; bottom: 0; right: 0; background: #e7ecee; z-index: 100;
        -webkit-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);}

    #tool header { border-bottom: 1px solid rgba(255, 255, 255, 0.5); height: 115px; }
    #tool header .logo {background: #fff; margin-bottom: 9px;}
    #tool header .logo img {display: block; height: 50px;}
    #tool header figure {width: 100px; overflow: hidden; border-radius: 50%; margin: 15px auto; border:4px solid #F8A51B;}
    #tool header figure img {width: 100%; height: auto;}
    #tool header p {padding-left: 75px;  font-size: 15px; margin: 0; background: url(../img/icon_user80.png) no-repeat 13px 2px;
        background-size: 35px; line-height: 22px;}
    #tool header .small-role-label {display: none;}
    #tool header .big-role-label {display: inline-block;}

    .minimal #tool header p {display: none;}

    #time {position: absolute; left: 0; top: 115px; bottom: 0; width: 60px; background: #cbd4d7; list-style: none; margin: 0;
        padding: 0; font-size: 13px; border-right: 1px solid #fff;}
    #time .spacer {height: 30px;}
    #time li {border-bottom: 1px solid #fff; padding: 5px 11px; cursor: pointer;}
    #time li {padding: 5px 0px; text-align: center;}
    #time li.active {background: #fff;}

    #phenomena {width: 230px; margin-left: 60px; background: #e7ecee; overflow: hidden;}
    #phenomena > div {overflow: hidden;}
    #phenomena > div p {padding: 0 17px; margin: 13px 0;}
    #phenomena h3 {background: #FCCB0D; color: #000; padding: 7px 21px; text-transform: uppercase; margin:0;
        font-size: 14px; text-align: center;}
    #phenomena .items {padding: 7px 15px; overflow: hidden;}
    #phenomena .items > * {width: 44px; float: left; border-radius: 3px; margin: 3px;}
    #phenomena .view .items .btn.active {border: 0; background: none;}
    #phenomena .view .items .btn:active {background: none;}
    #phenomena .view .items .btn:hover {background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.2);}
    #phenomena .items > * img{width: 100%; height: auto; display: block;}
    #phenomena .items input[type='text'],
    #phenomena .items input[type='number'] {width: 100%; height: 42px; background: none; border: 0; padding-left: 3px; line-height: 40px;
        font-size:17px;}
    #phenomena .owl-carousel {position: relative;}
    #phenomena .owl-nav> * {position: absolute; top: 5px;}
    #phenomena .owl-prev {left:7px;}
    #phenomena .owl-next {right:7px;}

    .phenomena-nav {list-style: none; margin: 0; padding:0;}
    .phenomena-nav li {font-size: 10px; width: 20%; float: left; text-align: center; background: #FCCB0D; padding: 3px 0;
        text-transform: uppercase; border-bottom: 1px solid #fff; border-left: 1px solid #fff; cursor: pointer;}
    .phenomena-nav li:first-child {border-left: 0;}
    .phenomena-nav li.active, .phenomena-nav li:hover {background: #fff; color:#333;}

    .phenomena-active > div {padding: 15px; overflow: hidden; position: relative;}
    .phenomena-active > div {width: 100%; border}
    .phenomena-active figure {width: 70px; float: left; margin: -15px 5px -15px -15px;}
    .phenomena-active > div .cmd {position: absolute; top: 0; bottom: 0; right: 0; width: 44px; background: #CBD4D7; border-left: 1px solid #fff;}
    .phenomena-active > div .btn {width: 44px; height: 44px; overflow: hidden; border-top: 1px solid #fff;}
    .phenomena-active > div .btn img{width: 100%; height: auto; display: block;}
    .phenomena-active > div .btn.active{border:0;}
    .phenomena-active > div .btn:first-child {border-bottom: 0;}
    .phenomena-active > div .btn:last-child {height: 22px;}
    .phenomena-active > div .btn:last-child img {width: 34px; margin: 0 auto; position: relative;}
    .phenomena-active > div .btn:last-child.active img {top:-18px;}
    .phenomena-active > div input {border:0; width: 286px; position: relative; top: 14px; left: -15px; padding:7px 7px 7px 15px; font-size: 15px; line-height: 21px;}


    #info {position: absolute; bottom: 0px; right:290px; background: #FCCB0D; padding: 12px 13px 9px 40px; font-size: 13px;
        background: url(../img/icon_file.png) #FCCB0D no-repeat 8px 6px; border-radius: 4px 0 0 0; min-height: 50px;
        background-size: 25px auto; z-index: 15;}
    .minimal #info {right: 60px;}

/*- MAP ---*/
    #mapid { height: 800px; width: 100%; display: block;}
    #mapid .leaflet-marker-pane img {cursor:pointer; transition: all 0.1s;}
    #mapid .leaflet-marker-pane i {display: none; width: auto !important; min-width: 13px !important; height: 13px !important;
        line-height: 13px; font-size: 10px; text-align: center;
        background:#E7ECEE; position: absolute; left: -15px; top: -15px; cursor: pointer; font-style: normal;
        color: $color; z-index: 999999 !important; border-radius: 50%; margin-left: 0 !important; margin-top: 0 !important;}
    #mapid.detailed .leaflet-marker-pane i {display: block;}
    .zoomstart #mapid .leaflet-marker-pane i {display: none;}

    /*.zoom2 #mapid .leaflet-marker-pane img {);
        width: 80px !important; height: 80px !important; margin-top: -40px !important; margin-left: -40px !important;}
    .zoom3 #mapid .leaflet-marker-pane img {);
        width: 120px !important; height: 120px !important; margin-top: -60px !important; margin-left: -60px !important;}
    .zoomstart #mapid .leaflet-marker-pane img {}*/

    ng-leaflet .leaflet-right {right: 15px; top: 5px;}
    ng-leaflet .leaflet-right.leaflet-bottom {display: none;}
    .point {background-color: #e00;}

    .map-icon {width: 35px; height: 35px; display: block; background: #f00;}

    #mapTool {position: absolute; right: 360px; top: 5px;}
    #mapTool > * {display: block; float: none;}
    #mapTool .refresh {width: 30px; margin-left:22px;}
    #mapTool .refresh img {width: 100%; height: auto;}
    .minimal #mapTool {right: 130px;}

/*- ACTION ---*/
    #action {display:block; position: absolute; top: 28px; left: 40%; height: 64px; padding: 3px 8px 8px 27px; width: 200px;
        background: #FCCB0D; font-size: 15px; line-height: 15px; z-index: 100; border-radius: 0 4px 4px 0; border: 4px solid #F8A51B;
        -webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.43);
        -moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.43);
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.43);}
    #action figure {position: absolute; top: -10px; left: -62px; border: 4px solid #F8A51B; width: 80px; height: 80px; border-radius: 50%;
        background: #fff;}
    #action strong {font-size: 13px; display: block; margin-bottom: 4px;}

/*- LOGIN ---*/
    #login-form {position: relative; margin: 150px auto 0; width: 390px; background: #E7ECEE; padding: 21px;}

    #login-form header {margin: -21px -21px 21px; background: #fff;}

    #login-form .result {background: #e00; color: #fff; margin: 21px -21px -21px; padding:17px 21px; display: none;}

    form .form-row {margin-bottom: 13px;}
    form .form-row label {display: block; padding-bottom: 5px; font-style: italic;}
    form input {border:0; width: 100%; padding: 7px 7px; font-size: 15px; line-height: 21px;}
    form select {border:0; width: 100%; padding: 7px 7px; font-size: 15px; line-height: 21px;}
    form .command-bar {bottom: -50px;}
    form .command-bar button {width: 50%; height: 50px; border: 0; display: inline-block; margin: 0;}
    form hr {border: 0; border-top: 1px solid rgba(0, 0, 0, 0.3); margin: 21px 0;}

    .form-full {margin: 0 -21px;}

/*- FORECAST ---*/
    #forecast {display: table;}
    #forecast>ul.folder {width: 165px; float: left; font-size: 15px; padding-top: 0;}
    #forecast>ul.folder li {padding: 13px; cursor: pointer; border-left: 3px solid #E7ECEE; border-bottom:1px solid #b4bdc0;}
    #forecast>ul.folder li:hover {border-left-color: #FCCB0D;}
    #forecast>ul.folder li.active {border-left-color: #4F86AF;}
    #forecast>ul.folder li span {display: inline-block; width: 20px; height: 20px; background-size:contain;
        background-repeat: no-repeat; background-position: center center; float: right;}
    #forecast>ul.folder li span.lock {background-image: url(../img/icon_lock80.png);}
    #forecast>ul.folder li span.myLock {background-image: url(../img/icon_myLock80.png);}


    .forecast {margin-left: 185px; margin-bottom: 21px; position: relative;}
    .forecast h2 {font-size: 13px; margin: 0 9px 9px;}
    .forecast p {padding: 0 9px;}
    .forecast.busy button {margin-left: 15px;}

    .map-forecast {position: absolute; z-index: 10; right: 290px; top: 0;}

    /* MAP ZONE */
    .map-zone {position: absolute; z-index: 10; right: 290px; bottom: 0; background: #E7ECEE; font-size:13px; top: 115px;}
    .map-zone h2 {font-size:13px; background: #4F86AF; color:#fff; padding: 13px; text-align: center; margin-bottom: 0;}
    .map-zone ul {margin: 0; padding: 0 0 50px;}
    .map-zone li {list-style: none; padding: 13px 13px 13px 0; text-transform: uppercase; clear: left;
        position:relative; border-bottom: 1px solid #fff;}
    .map-zone li:last-child {border-bottom: 0;}
    .map-zone li img {float: left; margin: -13px 0 -13px 0; cursor: pointer;}
    .map-zone i {display: none; width: auto; min-width: 13px; height: 13px;
        line-height: 13px; font-size: 10px; text-align: center;
        background:#E7ECEE; position: absolute; left: 19px; top: 7px; cursor: pointer; font-style: normal;
        color: $color; z-index: 999999 !important; border-radius: 50%;}
    .map-zone.detailed i {display: block;}

    .minimal .map-zone {right: 60px;}

/*- PAGE ---*/
    .page {position: relative; margin: 50px auto 0; width:100%; max-width: 999px; background: #E7ECEE; padding: 21px;}
    .page header {margin: -25px -25px 25px; background: #fff;
        -webkit-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);
        box-shadow: -5px 0px 18px -5px rgba(0,0,0,0.75);}
    .page .tab{position:absolute; top: -40px; left: 0; background-color: #E7ECEE; font-size: 0;}
    .page .tab > *{display: inline-block; width: 100px; height: 40px; padding: 5px 0;}
    .page .tab > * i {display: block; height: 30px; width: 100%; background-position: center center;
        background-size: contain; background-repeat: no-repeat;}
    .page .tab > a.map {box-shadow: inset -3px -3px 3px 0 rgba(0, 0, 0, 0.2); background: #B4BDC0;}
    .page .tab > *.map i {background-image: url(../img/icon_map80.png);}
    .page .tab > a.users {box-shadow: inset 3px -3px 3px 0 rgba(0, 0, 0, 0.2); background: #B4BDC0;}
    .page .tab > *.users i {background-image: url(../img/icon_users80.png);}
    .page .tab > span.active {background-color: #E7ECEE; box-shadow: none;}
    .page .tab > a:hover {background-color: #E7ECEE; box-shadow: none;}

/*- MODAL ---*/
    .modal {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 1001; display: none;}
    .modal > * {position: relative; top: 50px; width: 100%; background: #fff; margin: 0 auto; padding: 21px; max-width: 400px;}
    .modal .command-bar {overflow: hidden; background: #B4BDC0; bottom: -50px;}
    .modal .command-bar button {height: 50px; width: 33.3%;}

/*- TEMPLATE ---*/
    .map-template {margin-right: 290px;}
    .map-template #tool {width:290px;}
    .map-template #tool .command-bar {left: 60px;}

    .minimal .map-template {margin-right: 60px;}
    .minimal .map-template #tool {width: 60px;}

    .forecast-template {margin-right: 230px;}

    .login-template {}

/*- MEDIA QUERY ---*/

@media screen and (max-height: 800px) {
    #tool header {height: 90px; text-align: left;}
    #tool header p {padding-left: 42px;}
    #tool header .small-role-label {display: inline;}
    #tool header .big-role-label {display: none;}

    #tool header p {background-size: contain;}

    .phenomena-active > div {padding: 7px 15px;}
    .phenomena-active figure {margin: -7px 5px -7px -15px; width: 60px;}

    .map-zone {top:89px;}

    #phenomena h3 {font-size:13px; padding: 5px 21px;}
    #phenomena > div p {font-size: 14px;}
    #phenomena .items {padding: 4px;}
    #phenomena .items > * {width: 38px; margin: 1px 8px;}
    #phenomena .items input[type='text'],
    #phenomena .items input[type='number'] {height: 34px;}

    #phenomena .owl-nav > * {top: 3px;}

    #time {top: 90px;}
}