@import url(http://fonts.googleapis.com/css?family=Open+Sans);

*{box-sizing:border-box;}

html {height: 100%; font-family: Arial, sans-serif;}
body {background: url('img/default/bg_body_autenticador.png') bottom left no-repeat #fff; margin:0px; padding:0px; position: absolute;top: 0;right: 0;bottom: 0;left: 0; overflow: hidden;}

/* -- FORMULARIOS -- */
label {font-family: Arial, sans-serif; font-size:14px; font-weight:normal;}
input, button, select, textarea, .btn {font-family:Arial, sans-serif; font-size:14px; padding: 3px 12px; border-radius: 4px; border: 1px solid #ccc;}
.slide input, .slide button, .slide select, .slide textarea, .slide .btn {margin-bottom:10px;}
.botoes button {margin-bottom: 0px; font-size:12px;}
.btn-redtext {color: red;}
.btn-greentext {color: green;}

h3 {margin: 10px 0px;font-size: 20px;font-weight: bold; color:#61829a; border-bottom: 1px solid #f1f1f1; padding-bottom: 10px;}

#screen {position: absolute;height: 100%;width: 100%; background: url('img/default/bg_mapa.png'); z-index:-1;}

/*header {height:80px; position: absolute;right: 0;left: 0; background-color: #aecee5;}*/
header {height: 65px;position: absolute;width: 100%; /*border-bottom: 1px solid #AAC7DC;*/ background: url('../Operacoes/img/default/bg_header5.png') top right no-repeat; /*box-shadow: 0 3px 6px rgba(0, 0, 0, .1);*/background-position: 161px -10px; background-color:#fff;}
header #logo_ginlog_header {float:left; margin:4px 20px 0px 20px; background: url('img/default/logo_ginlog_56.png') top left no-repeat;width: 130px; height: 56px;background-color: transparent;}
header .inner-header {height: 65px; margin-left: 266px;background-color: #b4d6ee;}
header #user {position:absolute; right:35px; top:15px;}
header #user #user-logado { display:inline-block; font-size:14px; font-weight:bold; color:#fff; vertical-align: top;}
header #user #user-logado #usuario {text-align:right;}
header #user #user-logado #ultimo-acesso {text-align:right; font-size:10px; color: #61829a}
header #user #user-icon {display:inline-block; vertical-align: top;}
header #user #user-logado {display:inline-block; vertical-align: top;}
header #user #user-logado #empresa-label {font-size:10px; color:#61829a;}
header #user #user-logado #empresa-nome {font-size:14px; color:#fff;}
header #user #user-logado .btn-group .btn {background-color: transparent; border: 0px;}

#menu_direito { width: 100px;height: 100%;position: absolute;top: 0;right: 0; text-align:center; display:table; /*transition: width 0.3s;*/}
#menu_direito:hover { width:110px;}
#menu_direito nav {display:table-cell; vertical-align:middle;}
#menu_direito .item-menu { text-align:center; cursor:pointer; opacity:0.4; /*transition: opacity 0.5s;*/}
#menu_direito .item-menu .icone {}
#menu_direito .item-menu .icone svg {height:44px; width:44px; /*transition: width 0.2s, height 0.2s;*/}
#menu_direito .item-menu .texto {font-size:12px; color:#000;}
#menu_direito .item-menu:hover {opacity:1;}
#menu_direito .item-menu:hover .icone svg {width:54px; height:54px; }
#menu_direito .item-menu:hover .texto {font-weight: bold;}
#menu_direito #versao {position: absolute; bottom: 5px; font-size: 10px; left: 25px; color: #62839b;}

#menu_esquerdo { width: 200px; height: 98%; position: absolute; top: 0; left: 0; padding: 80px 5px 0px 5px; overflow-y:auto;}
#menu_esquerdo.active {background: url('img/default/striped.png');}
.esquerdo .tile {padding: 5px 15px; float: none; text-align: left; display: block;}
.esquerdo .tile .glyphicon {font-size: 20px;}
.esquerdo .tile p {display: inline-block; font-size: 14px; text-overflow: ellipsis;}
.esquerdo .tile .tile-config {position: absolute;top: 2px;left: -5px;width: 15px;height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.esquerdo .tile .tile-config .glyphicon {font-size: 11px; }
.esquerdo .tile:hover .tile-config {opacity: 0.5; left: 2px;}
.esquerdo .tile:hover .tile-config:hover {opacity: 1;}

#menu_esquerdo_autenticadores { width: 200px; height: 98%; position: absolute; top: 0; left: 0; padding: 80px 5px 0px 5px; overflow-y:auto;}
#menu_esquerdo_autenticadores.active {background: url('img/default/striped.png');}
.favoritosAutenticadores .tile {padding: 5px 15px; float: none; text-align: left; display: block;}
.favoritosAutenticadores .tile .glyphicon {font-size: 20px;}
.favoritosAutenticadores .tile p {display: inline-block; font-size: 14px; text-overflow: ellipsis;}
.favoritosAutenticadores .tile .tile-config {position: absolute;top: 2px;left: -5px;width: 15px;height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.favoritosAutenticadores .tile .tile-config .glyphicon {font-size: 11px; }


#content {text-align: center; height:99%; width:100%; display:table;}

#content #menu, #area {font-family:'Century Gothic',Arial,sans-serif; margin:auto; max-width:650px; display: table-cell; vertical-align:middle;padding-right: 1px; padding-left:1px; /*padding: 75px 0px;*/}

#content #area .section {min-width: 650px; margin: auto; text-align: left; min-height: 240px;max-width: 50%;}
#content #area .section2 .botoes {float:right; margin-top:10px;}

#content #area .search { }
#content #area input.sty {width: 100%;padding: 5px 7px;border-radius: 3px;border: 1px solid #999;outline-color: lightskyblue;}
#content #area button.sty {border-radius: 5px;border: 1px solid #999;cursor: pointer;padding: 2px 5px; background-color: rgba(21,55,80,0.6); color: #666;font-size: 11px;margin: 0px 0px 2px 0px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
#content #area button.sty:hover {border:1px solid #444; color:#444;
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(206,206,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(206,206,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(206,206,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(206,206,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(206,206,206,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(206,206,206,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */
}
#content #area button.sty:focus {outline-color: none;}
#content #area .result { margin:auto; padding: 5px;}
#content #area .result .item {background-color: #b4d6ee; border-radius: 3px; text-align: right; color: #fff;padding: 3px 7px;font-size: 14px;font-weight: bold;font-family: Arial; margin-top:5px; /*transition: background-color 0.5s;*/}
#content #area .result .item .name {float: left; margin-top: 4px;}
#content #area .result .item .name span {font-style:italic; font-weight:normal;}
#content #area .result .item .name img {margin-right:10px; opacity:0.5;} 

#content #area .result .item .name-gray {float: left; margin-top: 4px;color:gray;}
#content #area .result .item .name-gray span {font-style:italic; font-weight:normal;}
#content #area .result .item .name-gray img {margin-right:10px; opacity:0.5;} 

#content #area .result .item .functions {display:inline-block;}
#content #area .result .item.active {background-color: #61829a;}
#content #area .result .item:hover {background-color: #61829a;}

#content #area #panel {max-width:650px; margin:auto;}
#content #area #aboutuser {width: 235px;display: inline-block;vertical-align: top; background-color: rgba(21,55,80,0.2); color:#fff;border-radius: 7px;text-align: left;padding: 10px 10px;font-size: 14px;margin-right: 7px;}
#content #area #aboutuser .name { font-weight:bold;}
#content #area #aboutuser .name span {font-style:italic; font-weight:normal;}
#content #area #aboutuser .name img {margin-right:10px; opacity:0.5;} 
#content #area #treeview {width:400px; text-align:left;height: 300px; overflow-y: auto; border-left: 1px solid #AAC7DC;padding-left: 10px; display: inline-block;}
#treeview .title {border-bottom: 1px solid #AAC7DC;margin-bottom: 10px;background-color: rgba(21,55,80,0.02);padding: 5px 5px 8px 5px;border-radius: 5px;font-weight: bold;}

/*
#treeview .botoes {float:right;}
#treeview .bonsai {font-size: 12px;}
#treeview .bonsai li.app {font-style: italic;background-color: rgba(21,55,80,0.05);border-radius: 5px;color: #fff;margin-top: 5px;text-transform: uppercase;}
#treeview .bonsai li.app:hover {background-color: rgba(21,55,80,0.1);}
*/

#relogio {position:absolute; bottom: 35px; left:40px; font-family:'Century Gothic',Arial,sans-serif;}
#relogio #data {font-size:12px; color:#153750;}
#relogio #hora {margin-top: -10px;}
#relogio #hora svg path {fill: #153750;}
#relogio #hora span {font-size:44px; color:#153750;}

/*  --  BARRA DE ROLAGEM  --  */
::-webkit-scrollbar {width: 8px; display:none;}
::-webkit-scrollbar-button {}
/*::-webkit-scrollbar-track {background-color: rgba(125,179,217,0.4); border-left: 0px;}*/
::-webkit-scrollbar-track {background-color: #f4f4f4; border-left: 0px; border-radius:6px;}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {background-color: #e4e4e4; border-radius:6px; cursor:ns-resize;}
::-webkit-scrollbar-thumb:hover {background-color: #a9a9a9;}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}

/* -- BOOTSTRAP -- */
.slider-tabs li button.close {float: none; height: 18px; vertical-align: bottom; font-size: 19px !important; color: #bbb;}
.slider-tabs li button.close:hover {color: indianred;}
.slider-tabs li button.close:focus {outline:none;}

.dropdown.icones, .dropdown.cores {display: inline-block;}
.dropdown.icones button, .dropdown.cores button {width:200px;}
.dropdown.icones li, .dropdown.cores li {display:inline-block;}
.dropdown.icones .dropdown-menu, .dropdown.cores .dropdown-menu {width:404px; white-space: normal; top: 27px;}
.dropdown.icones .dropdown-menu li, .dropdown.cores .dropdown-menu li {padding: 2px;}
.dropdown.icones li a {padding:3px 5px;}
.dropdown.cores li a {padding:0px;}
.modal {overflow: hidden;}




/* -- METRO -- */
.tile {  background: #fff;  box-sizing: border-box;  cursor: pointer;  display: inline-block;  margin-top: 2px; margin-bottom: 2px;  padding: 15px; color:#fff; /*transition: background-color 0.5s, box-shadow 0.5s, border-radius 0.5s;*/ border-radius: 3px 30px 3px 3px; margin-right: 4px; float: left; position:relative; text-align:center;}
.tile .glyphicon {font-size: 36px; /*transition: font-size 0.5s;*/}
.tile .title {  margin-top: 0px;}
.tile-text {  padding-bottom: 15px; padding-top: 15px; text-align: center;}
.tile p {  margin-bottom: 0;}
.tile:hover {-webkit-box-shadow: inset 0px 0px 30px 0px rgba(50, 50, 50, 0.62); -moz-box-shadow: inset 0px 0px 30px 0px rgba(50, 50, 50, 0.62); box-shadow: inset 0px 0px 30px 0px rgba(50, 50, 50, 0.62); border-radius: 3px 30px 3px 3px;}
.tile:hover .glyphicon {}

.tile .glyphicon .folder-return {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0; font-size:10px}
.tile .glyphicon .folder-return .glyphicon {font-size: 12px; }
.tile .glyphicon:hover .folder-return {opacity: 0.5; left: 5px;}
.tile .glyphicon:hover .folder-return:hover {opacity: 1;}

.tile .folder-wrench {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;font-size:10px}
.tile .folder-wrench .glyphicon {font-size: 12px; }
.tile:hover .folder-wrench {opacity: 0.5; left: 5px;}
.tile:hover .folder-wrench:hover {opacity: 1;}

.tile .folder-wrench-pasta {position: absolute;top: 25px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;font-size:10px}
.tile .folder-wrench-pasta .glyphicon {font-size: 12px; }
.tile:hover .folder-wrench-pasta {opacity: 0.5; left: 5px;}
.tile:hover .folder-wrench-pasta:hover {opacity: 1;}


.tile.folder {background-color: #f39c12;}
.tile.folder:hover {background-color: #ab6e0d;}
.tile.folder.active {background-color: orangered;}
.tile.folder .folder-del {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile.folder .folder-del .glyphicon {font-size: 12px; }
.tile.folder:hover .folder-del {opacity: 0.5; left: 5px;}
.tile.folder:hover .folder-del:hover {opacity: 1;}

.tile .folder-return {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile .folder-return .glyphicon {font-size: 12px; }
.tile:hover .folder-return {opacity: 0.5; left: 5px;}
.tile:hover .folder-return:hover {opacity: 1;}

.tile.autenticador .folder-return {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile.autenticador .folder-return .glyphicon {font-size: 12px; }
.tile.autenticador:hover .folder-return {opacity: 0.5; left: 5px;}
.tile.autenticador:hover .folder-return:hover {opacity: 1;}

.tile.folder .folder-return {position: absolute;top: 38px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile.folder .folder-return .glyphicon {font-size: 12px; }
.tile.folder:hover .folder-return {opacity: 0.5; left: 5px;}
.tile.folder:hover .folder-return:hover {opacity: 1;}


.folder-not-draggable {background-color: #f39c12;}
.folder-not-draggable:hover {background-color: #ab6e0d;}
.folder-not-draggable.active {background-color: orangered;}
.folder-not-draggabler .folder-del {position: absolute;top: 5px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.folder-not-draggable .folder-del .glyphicon {font-size: 12px; }
.folder-not-draggable:hover .folder-del {opacity: 0.5; left: 5px;}
.folder-not-draggable:hover .folder-del:hover {opacity: 1;}


.tile.folder .folder-rename {position: absolute;top: 22px;left: -5px;width: 15px; height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile.folder .folder-rename .glyphicon {font-size: 12px; }
.tile.folder:hover .folder-rename {opacity: 0.5; left: 5px;}
.tile.folder:hover .folder-rename:hover {opacity: 1;}

.new-folder, .up-folder {position: absolute; right: 2px; z-index: 100; background-color: #f5f5f5; border-radius: 4px; text-align: center; padding: 0px 2px; color:#ccc; cursor:pointer;}
.new-folder:hover, .up-folder:hover {color:#aaa;}
.up-folder {top:25px;}

.tile.autenticador {background-color: #00aba9;}
.tile.autenticador:hover {background-color: #007877;}
.tile .tile-config {position: absolute;top: 5px;left: -5px;width: 15px;height: 15px; /*transition: opacity 0.5s, left 0.3s;*/ opacity: 0;}
.tile .tile-config .glyphicon {font-size: 15px; }
.tile:hover .tile-config {opacity: 0.5; left: 5px;}
.tile:hover .tile-config:hover {opacity: 1;}

/******CORES PADRAO******/
/*
.app-red {background-color: #e51400;}
.app-red:hover {background-color: #a10e00;}
.app-green {background-color: #8cbf26;}
.app-green:hover {background-color: #62861b;}
.app-blue {background-color: #375ad9;}
.app-blue:hover {background-color: #273f98;}
.app-yellow {background-color: #e6ce00;}
.app-yellow:hover {background-color: #a19100;}
.app-purple {background-color:#39007f;}
.app-purple:hover {background-color:#28005a;}
.app-wine {background-color:#590026;}
.app-wine:hover {background-color:#3f001b;}
.app-orange {background-color: #d66912;}
.app-orange:hover {background-color: #964a0d;}
.app-gray {background-color:#6e6e6e;}
.app-gray:hover {background-color:#4e4e4e;}
*/

/******CORES PASTEL******/
.app-red {background-color: #e6675c;}
.app-red:hover {background-color: #e51400;}
.app-green {background-color: #b0cf73;}
.app-green:hover {background-color: #8cbf26;}
.app-blue {background-color: #7e93e0;}
.app-blue:hover {background-color: #375ad9;}
.app-yellow {background-color: #e6d75c;}
.app-yellow:hover {background-color: #e6ce00;}
.app-purple {background-color:#7b58a4;}
.app-purple:hover {background-color:#39007f;}
.app-wine {background-color:#8d576e;}
.app-wine:hover {background-color:#590026;}
.app-orange {background-color: #dd9b67;}
.app-orange:hover {background-color: #d66912;}
.app-gray {background-color:#9e9e9e;}
.app-gray:hover {background-color:#6e6e6e;}

.paleta {width:20px; height: 20px; display:inline-block; margin: 0px 2px;}



/* -- SLIDER -- */
.section2 {margin: auto;text-align: left;max-width: 50%; width: 760px; height: 350px; position: relative;}
.slider-tabs {margin:0px 0px 20px 0px; padding:0px;list-style: none; border-bottom: 1px solid #fafafa;}
.slider-tabs a {font-family: Arial, sans-serif; text-decoration:none;}
.slider-tabs li {display: inline-block;padding: 3px 5px;border-radius: 3px 10px 3px 3px; margin: 0px 4px 4px 0px; background-color: #f8f8f8;}
.slider-tabs li:hover {background-color: #ddd;}
.slider-tabs li.active {background-color: #428bca;}
.slider-tabs li.active a, .slider-tabs li.active span {color:#fff;}
.slider {height: 310px;width: 4000px;position: absolute; white-space:nowrap;}
.slider .slide {/*height: 300px;*/width: 760px; display: inline-block; margin: 0px 140px 0px 0px; transition: opacity 0.5s, visibility 1s; opacity:0; pointer-events:none; vertical-align: top; min-width: 375px; overflow-y: auto; position: relative; min-height: 50px; padding-right:46px; visibility: hidden;}
.slider .slide.bgform {background-color: #fcfcfc; border: 1px solid #ddd; border-radius: 10px; padding: 4px 10px; min-height: 310px;}
.slider .slide.active { opacity:1; pointer-events:all; visibility: visible;}
.slider .slide.activate {background: url('img/default/striped.png');}
.slider .slide .slide-content {}
.slider-prev, .slider-next {position: absolute;width: 80px;height: 80px;top: 100px;cursor:pointer;}
.slider-prev {left: -80px; }
.slider-next {right: -80px;}
.slider-prev span, .slider-next span {font-size:70px; color: #000; opacity:0.07; transition: opacity 0.3s;}
.slider-prev:hover span, .slider-next:hover span {opacity: 0.5;}

#elipse {position: absolute;bottom: -30px;color: #ccc;left: 44%; font-size: 8px;}

/* -- DIALOG -- */
.dialog {   max-width: 600px;    max-height: 500px;    display: none;}
.ui-dialog {    background-color: rgba(255,255,255,0.9) !important;    border: 1px solid rgba(0,0,0,0.2) !important;    background-image: none !important;    min-width: 400px;}
.ui-dialog-titlebar { border-width: 0px !important;    background: url('img/default/bg_footertitle.png') top left repeat-x #589BC4 !important;    color: #fff !important;    font-weight: normal !important;    font-size: 14px;    padding: 3px !important;}
.icon_fechar, .ui-dialog-titlebar-close {    background: url('img/icons/icon_fechar.png') center center no-repeat;    height: 16px;    width: 16px;    border: 0px;    display: inline-block;    cursor:pointer; position: absolute;right: 0;top: 4px;}
.ui-dialog-title {    text-align: left !important;    padding-left: 10px; font-weight: bold;}
.ui-dialog-content {    padding: 5px !important;    font-size: 10;   color: #555 !important;}
.ui-widget-overlay {    background: rgba(255,255,255,0.6) !important;    opacity: inherit !important;}
.ui-dialog-buttonset {text-align:right;}
.ui-dialog-buttonset button {margin:3px;padding: 3px 10px;font-size: 12px;}

