/*
Estilos SAI version 2020
*/
body {
    /*background-color: #f2f2f7 !important;*/
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

/********************** LOGIN **************************/
.s2-center-content {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    /*background-color: #f2f2f7;*/
}

.s2-no-scroll {
    overflow: hidden;
}

#s2-login-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.s2-center-form {
    height: 100%;
    text-align: center;
    /*display: flex;*/
    display: grid;
    align-items: center;
}

#s2-login-form {
    height: 100%;
    width: 100%;
    padding: 15%;
    text-align: left;
    background-color: #fff;
    margin: 0;
}

@media (max-width: 1023px) {
    #s2-login-form {
        padding: 7%;
    }
    #s2-login-img {
        display: none;
    }
    .col:first-of-type {
        display: none;
    }
}

/*******************************************************/

#s2-wrapper {
    /*background-color: #f2f2f7;*/
    height: 100%;
}

/* Menu sidebar */
#s2-sidebar-wrapper{
    color: #333;
    width: 70px;
    /*height:100vh;*/
    height: 100%;
    /*overflow-y:hidden;*/
    background: #fff;
    transition:all .5s;
    float: left;
    bottom: 0;
}

.s2-burger {
    padding-left: 1em;
}
  
/* Main Content */
#s2-page-content-wrapper{
    width: auto;
    height: 100%;
    transition:all .5s;
    display:flex;
    /*background-color: #f2f2f7;*/
}

#s2-menu-toggle{
    /*padding-left: 70px;*/
    color: #fff;
    transition:all .3s;
    font-size:1em;
}
/* Change the width of the sidebar to display it*/
#s2-wrapper.menuDisplayed #s2-sidebar-wrapper{
    width:240px;
}

/* Sidebar styling */
.s2-sidebar-nav{
    padding-left:2%;
    list-style:none; 
    transition:all .5s;
    width:100%;
    text-align:left;
    font-size: 20px;
    text-align: center;
    height: 100%;
    margin-bottom: 0;
    box-shadow: -15px -10px 20px 0px rgba(0,3,51,1);
    animation: fadein 2.5s;
}

.s2-menu-list {
    text-align:left;
    font-size: 15px;
}

.s2-menu-list li {
    border-top: 1px solid #f2f2f7;
}

.s2-sidebar-nav img {
    width: 100%;
    display: none;
}

.s2-sidebar-nav li{
    width:100%;
    transition:all .3s;
    padding:10px;
}

.s2-sidebar-nav li a {
    display:block;
    text-decoration:none;
    color:#333;
}

.s2-sidebar-nav li:hover{
    background:#f2f2f7;
}

.s2-menu-bar {
    align-items:center;
    color: #fff;
    height: 50px;
    margin-right: 0px !important;
    font-size: 16px;
}

.s2-menu-nav {
    background-color: #fff;
    margin-top: -1000px;
    font-size: 14px;
    border-bottom: 1px solid rgb(228, 228, 228);
}

.s2-sidebar-nav > li {
    display: none;
}

#s2-menu-side-cont {
    display: none;
}

.s2-menu-nav a {
    color: #333;
}
.s2-menu-nav a:hover {
    background-color: #f2f2f7;
}

.s2-right {
    text-align: right;
    padding-right: 20px !important;
}

.s2-user {
    color: #fff;
    text-decoration: none;
}

.s2-user:hover {
    color: #fff;
    text-decoration: none;
}

/** pin **/
.pinned-toggle {
    position: relative;
    display: block;
    width: 30px;
    height: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }
  .pinned-toggle:before {
    content: "";
    position: relative;
    top: 7px;
    left: 7px;
    width: 20px;
    height: 8px;
    display: block;
    background: #9A9999;
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  .pinned-toggle span {
    position: absolute;
    top: 5px;
    left: 0;
    width: 12px;
    height: 12px;
    display: block;
    background: white;
    border-radius: 10px;
    transition: all 0.2s ease;
  }
  .pinned-toggle span:before {
    content: "";
    position: absolute;
    display: block;
    margin: -18px;
    width: 46px;
    height: 46px;
    background: rgba(230, 230, 230);
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
  }
  
  #pinned:checked + .pinned-toggle:before {
    background: #ffffff;
  }
  #pinned:checked + .pinned-toggle span {
    background: #9A9999;
    transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
  }
  #pinned:checked + .pinned-toggle span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
  }
  
  #s2-sidebar-wrapper, .s2-content-load {
    animation: fadein 1.5s;
  }
  @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
  }
  @-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
  }
  @-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
  }
  @-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
  }

  /* menu detalle */
  .s2-det-menu {
      background-color: #fff;
      box-shadow: 3px 3px 10px -4px rgba(169,169,169);
      font-size: 15px;
      /*height: auto;*/
      font-family: Arial, Helvetica, sans-serif;
      height: 100%;
      top: 51px;
      margin-left: 60px;
      position: absolute;
      text-align: left;
      width: 250px;
      z-index: 10;
      animation: fadeinMenu 0.5s;
  }
  .tree-menu {
    width: 95%;
    height: auto;
  }

  @keyframes fadeinMenu {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
  }

  .s2-det-menu ul {
      padding: 0;
  }
  .s2-det-menu li {
    padding: 1px 0 1px 15px;
  }
  .s2-det-menu span {
    font-size: 25px;
  }
  .s2-menu-more {
    font-size: 27px;
    float: right;
    margin-right: 1em;
  }
  .svg-icon {
    width: 1em;
    height: 1em;
  }
  .svg-icon path,
  .svg-icon polygon,
  .svg-icon rect {
    fill: #333;
  }
  .svg-icon circle {
    stroke: #333;
    stroke-width: 1;
  }

/* scrollbar */
.s2-scrollbar {
    overflow-y: scroll;
    scrollbar-color: #333 #fff;
    /*max-height: 90vh;*/
    height: 90%;
}
.s2-scrollbar::-webkit-scrollbar-track
{
	background-color: #fff;
}

.s2-scrollbar::-webkit-scrollbar
{
	width: 8px;
	background-color: #b9b9b9;
}

.s2-scrollbar::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	background-color: #b9b9b9;
}

/*effect-underline*/
.label-wrapper:after {
    content: '';
    position: absolute;
    left: 2;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #c4c4c4;
    margin-top: -3px;
    opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.label-wrapper:hover:after {
    opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* finder */
#searchField {
    background-color: transparent;
    border: 0px;
    border-bottom: 1px solid #f2f2f7;
    color: #fff;
    outline: none;
    width: 90%;
}
#finderResult {
	border: 1px solid #dfdfdf;
    background: rgba(255, 255, 255, 0.9);
    width: 93%;
    max-height: 50vh;
    position: absolute;
    z-index: 10;
    overflow-y: auto;
    scrollbar-color: #333 rgba(255, 255, 255, 0.6);
}
#finderResult::-webkit-scrollbar-track
{
	background-color: #fff;
}

#finderResult::-webkit-scrollbar
{
	width: 8px;
	background-color: #b9b9b9;
}

#finderResult::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	background-color: #b9b9b9;
}
.finderEl {
    background-color: #fff;
    color: #333;
    margin: 10px;
    font-size: 12px;
}
.finderEl > a > h3 {
    color: #000;
    font-weight: bold;
}
.finderEl > a {
    text-decoration: none;
}
.findT-enter-active, .findT-leave-active {
  transition: opacity .5s
}
.findT-enter, .findT-leave-to {
  opacity: 0
}
[v-cloak] {
    display: none;
}
/*breadcrumb*/
#s2-breadcrumb {
    background-color: #fff;
    border-bottom: 1px solid rgb(228, 228, 228);
    font-size: 13px;
    padding-left: 1em;
}

#s2-title-resp {
    display: none;
}
#s2-title {
    display: block;
}

/*view more*/
#s2-currentMenu {
   display: none;
   position: absolute;
   font-size: 20px;
   vertical-align: top;
}
											
#s2-currentMenuContent {
    font-size: 14px;
    width: 210px;
    padding: 5px;
    border: 1px solid #a3a3a3;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px rgb(214 214 214 / 75%);
    z-index: 5;
    position: absolute;
}
#s2-currentMenuContentUl {
    list-style: circle;
    margin-left: -15px;
}

/* Responsive less than 1024*/
@media (max-width: 1023px) {

    #s2-user-menu {
        display: none;
    }
    #s2-title-resp {
        display: block;
        color: #fff;
        padding: 5px;
    }
    #s2-title {
        display: none;
    }
    #s2-burger-menu {
        display: none;
    }
    .s2-sidebar-nav {
        list-style-type: none;
        text-align: center;
        display: flex;
        z-index: 10;
        position: fixed;
        bottom: 0;
        height: 50px;
        box-shadow: none;
        border-top: 1px solid #787878;
        background-color: #fff;
        overflow: auto;
        overflow-y: hidden;
        animation: fadein 2.5s;
    }
    
    .s2-sidebar-nav > li:first-child {
        visibility: hidden;
    }
    /* menu detail */
    .s2-det-menu {
        position: fixed;
        right: 0;
        top: 0;
        height: 96%;
        width: 90%;
    }
    .s2-menu-side-main-top {
    	display: none !important;
    }    
	[v-cloak] {
	    display: none;
	}

}

@media print {
    .s2-sidebar-nav {
        display: none;
    }
    #finder {
        display: none;
    }
}