@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
html,body{width:100%; height:100%; padding:0; margin:0; font-family: "Josefin Sans", sans-serif !important; 
  background:
    radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
    radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
    radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
    radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
    radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
}
.min460{min-width: 460px;}
.min900{min-width: 950px;}
.min1000{min-width: 1000px;}

/*********************************/
/************ GENERALS ***********/
/*********************************/
.btn,.btn2 {
  cursor: pointer; 
  line-height: 50px;
  max-height:50px;
  color: #FFF;
  background: #3d54b1;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  line-height: normal !important;
  padding: 0 10px;
  text-align: center;
  border: 1px solid transparent !important;
}
.btn:hover,.btn2:hover { background: #000 ; }
.btn.btn-viewer{background: #9f3c54 !important;}
.btn.btn-viewer:hover{background: #b6284b !important;}

.btn-xxs{padding: 3px 8px !important; border-radius: 10px !important; max-height:20px !important; font-size:13px !important; }
.btn-xls{padding: 3px 10px !important; border-radius: 5px !important; max-height:20px !important; font-size:14px !important; }
.btn40{padding: 10px 15px !important;}
.btn45{padding: 10px 25px !important;}
.btn50{padding: 10px 35px !important;}
.btn12{padding: 12px 0px !important;}
.btn.disabled{cursor:not-allowed !important; opacity:0.5 !important;}
.clearfix{clear:both;}
.floatL{float:left;}
.floatR{float:right;}
.w100p{width:100%;}
.w100wp{width:-webkit-fill-available;}
.w100wp-block{width:-webkit-fill-available; display:block; margin:3px;}
.h100, .h100p{height:100%;}
.overflow-hidden{overflow:hidden;}
.bg_white{background-color:rgba(255,255,255,0.8);}
.w200{width: 200px !important;}
i.bi.rotate::before{transform: rotate(90deg) !important;}

:root {
  --primary2: #3d54b1 !important;
}


/*********************************/
/************ TOP BAR ************/
/*********************************/
.topBAR { width: 100%; height: 100px; }
.topBAR > .logo { width: 120px; height: 60px; background: transparent url('../img/ned_scan_v2_400x170_light.png') no-repeat 0 0; background-size:contain; position:absolute; margin: 20px; }


/*********************************/
/************ LOGIN **************/
/*********************************/
.logo_NTP_login{ width:260px; height: 100%; min-height: 120px; margin:0 auto; border:20px solid transparent; background: transparent url('../img/NTPlogoBNW600px.png') no-repeat 50% 50%; background-size:contain; }
.container_form{ padding:25px; margin:25% auto; width:360px; background: #FFF; box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; border-radius:5px; }
.container_form form .data label{ font-size: 18px; }
.container_form form .data input{ height: 100%; width: 100%; padding: 10px; text-align: right; font-size: 17px; border: 1px solid silver; }
.container_form form .data input:focus{ border-color: #3498db; border-bottom-width: 2px; }
.container_form form .btn{ margin: 30px 0 0; height: 60px; width: 100%; position: relative; overflow: hidden; }
.container_form form .btn .inner{ height: 100%; width: 100%; z-index: -1; transition: all 0.4s; }
.container_form form .btn:hover .inner{ left: 0; }
.container_form form .btn button{ height: 100%; width: 100%; background-color: #0056d7; border-radius: 25px; border: none; color: #fff; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.container_form .mensajeUtente{width:100%; color: #F00; margin: 1em 0 0; text-align:center; display:none;}


/*********************************/ 
/********** STRUCTURE ************/
/*********************************/
#bodyhome{overflow:hidden;}
#bodyhome .topbar{width: 100%; height:60px; background:rgba(255,255,255,0.15); padding:10px; z-index:100; }
#bodyhome .topbar .logoned{width: 120px; height: 40px; position:absolute; left:0; background: transparent url('../img/ned_scan_v2_400x170_light.png') no-repeat 50% 50%; background-size:contain;}
#bodyhome .topbar .logout{width: 120px; height: 40px; position:absolute; right:0; text-align: center; }
#bodyhome .topbar .userdata{width:calc(100% - 250px); height: 40px; position:absolute; left:125px; text-align:center; }
#bodyhome .topbar .userdata > span{font-size:24px; color:#FFF; line-height: 45px; }
#bodyhome .topbar .userdata > span::before{width:40px; height:40px; content:" "; position:absolute; margin-left: -45px; background: transparent url('../img/users.png') no-repeat 0 0;}
#bodyhome .topbar .userdata.type0 > span::before{background-position:-00px;}
#bodyhome .topbar .userdata.type1 > span::before{background-position:-80px;}
#bodyhome .topbar .userdata.type2 > span::before{background-position:-40px;}
#bodyhome .topbar .userdata.type3 > span::before{background-position:-120px;}

#bodyhome .h100p{ height:calc(100% - 120px); overflow:hidden; }
#bodyhome .rowoverflow{ height:calc(100% - 20px); overflow:hidden; }
#bodyhome .rowoverflow180{ height:calc(100% - 180px); overflow:hidden; }
#bodyhome .coloverflow{ height:100%; overflow-y:scroll; }
#bodyhome .coloverflowp{height:calc(100% - 120px); overflow-y:scroll; overflow-x: hidden;}
#bodyhome .coloverflowpXY{height:calc(100% - 120px); overflow:scroll; }

#bodyhome .mensajeUtente{position: absolute; width: 100%; z-index:101; top: 60px; text-align: center; color: #FFF; font-size: 15px; display: none;}


/*********************************/ 
/************ HOME ***************/
/*********************************/
.slide{ border: 1px solid #888; border-radius: 8px; padding: 20px 12px 20px 28px; margin:0 1% 1% 0; width: 32%; height: 220px; background-color: rgba(255, 255, 255, 0.7); float: left; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 2px 10px -3px #000;}
.slide:hover{background-color: rgba(211, 223, 255, 0.8);}
.slide::before{     
  width: 350px;
  height: 20px;
  margin: 30px 0 0 -196px;
  position: absolute;
  padding: 5px 0 0;
  background: #ffffff66;
  overflow: hidden;
  font-size: 0.6em;
  text-align: center;
  rotate: -90deg;
  -webkit-rotate: -90deg;
  color: #FFF;
}
.slide[data-tipo="Pathology"]::before{content:"Pathology";   background:#1091db66;}
.slide[data-tipo="Polarized"]::before{content:"Polarized";   background:#0f061d66;}
.slide[data-tipo="Histology"]::before{content:"Histology";   background: #00b45a66;}
.slide[data-tipo="Hematology"]::before{content:"Hematology"; background: #e01e1e66;}
.slide[data-tipo="Cytology"]::before{content:"Cytology"; background: #c91ee066;}
.slide[data-tipo="Other"]::before{content:"Other"; background: #e0d31e66;}

.search{width: 200px !important; float: right !important; }
.search > input{ padding: 2px 8px !important; font-size: .8em; }
.search button{ border: 1px solid #ced4da !important; padding: 5px 5px !important; border-radius: 0 .25em .25em 0 !important; background: #17A2B8 !important; color: #FFF !important; }
.sbyfecha{width: 135px !important; float: right !important;}
.sbyfecha > input{border: 1px solid #ced4da !important; border-radius: .25em !important; height: 30px !important; font-size: .8em; }
.sbyfecha > input:focus{color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }

/* filter by type */
.dropdown-menu .dropdown-item::before {content: "";display: inline-block;width: 10px;height: 10px;border-radius: 50%;margin-right: 8px;vertical-align: middle;}
.dropdown-menu .dropdown-item[data-filter="Pathology"]::before {background-color: #1091db;}
.dropdown-menu .dropdown-item[data-filter="Polarized"]::before {background-color: #0f061d;}
.dropdown-menu .dropdown-item[data-filter="Histology"]::before {background-color: #00b45a;}
.dropdown-menu .dropdown-item[data-filter="Hematology"]::before {background-color: #e01e1e;}
.dropdown-menu .dropdown-item[data-filter="Cytology"]::before {background-color: #c91ee0;}
.dropdown-menu .dropdown-item[data-filter="Other"]::before {background-color: #e0d31e;}

.dropdown-menu .dropdown-item.filterbtn.btn-info{background-color: #17a2b8; color: #FFF; border-left: 10px solid #FFF; border-right: 10px solid #FFF;}

/*********************************/ 
/************ Gruppo *************/
/*********************************/
#bodyhome .topbar .userdata > div.gruppo{ cursor: pointer; width: 75px; height: 40px; background-color: transparent; position: absolute; top: 0px; left: 20px; overflow: hidden; border-radius: 5px; }
#bodyhome .topbar .userdata > div.gruppo > img{ max-width: calc(100% - 15px); max-height: 40px; width: auto; height: auto; position: absolute; left: 0; border-radius: 5px;}
#bodyhome .topbar .userdata > div.gruppo::after{ width: 10px; height: 10px; top: 14px; right: 0; position: absolute; font-size: 10px; color:#FFF; font-family:"bootstrap-icons"; content: "\f229"; }
#bodyhome .topbar .userdata > div.gruppo:hover,
#bodyhome .topbar .userdata > div.gruppo:active{box-shadow: 0 0 4px -2px #000; }
#bodyhome .topbar .userdata > div.gruppo.open{box-shadow: 0 0 4px -2px #FFF; }
#bodyhome .topbar .userdata > div.gruppo.open::after{content: "\f235"; }

#datigruppowrap{ width: 0px; background-color: rgba(255,255,255,0.8); z-index: 50; height: calc(100% - 60px); position: absolute; left: 0; top: 60px; overflow: hidden; transition: all .3s ease; -webkit-transition: all .3s ease;}
#datigruppowrap.open{ width: 400px; box-shadow: 2px 2px 8px -4px #000; }
#datigruppowrap > div{ background-color: rgba(255,255,255,0.8); width: 360px; margin: 20px; text-align: center; padding: 10px;}
#datigruppowrap > div > img{ width: auto; border-radius: 6px; height: 100px; margin: 15px auto 20px; display: block;}
#datigruppowrap > div > h2{color: #0056d7; font-size: 24px; text-align: center;}
#datigruppowrap > div > h3{color: #0056d7; font-size: 20px; text-align: center;}
#datigruppowrap > div > h4{color: #0056d7; font-size: 18px; text-align: center;}
#datigruppowrap > div > h5{color: #AAA; font-size: 16px; text-align: center;}
#datigruppowrap > div > h6{color: #AAA; font-size: 16px; text-align: center;}
#datigruppowrap > div > ul{text-align: left;}


/*********************************/ 
/********* FLIP SLIDE ************/
/*********************************/
.flip-slide { perspective: 1000px; }
.flip-slide-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-slide:hover .flip-slide-inner { transform: rotateY(180deg); }
.flip-slide-front, .flip-slide-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-slide-back { transform: rotateY(180deg); }
.flip-slide-back .btn{position: absolute; right: -10px; bottom: -18px; opacity: 0.6; font-size: .7em; }
.flip-slide-back .btn:hover{ opacity: 1;}
.slide[data-tipo="Pathology"] .flip-slide-back .btn{ background-color:#1091db;}
.slide[data-tipo="Polarized"] .flip-slide-back .btn{ background-color:#5e10db;}
.slide[data-tipo="Histology"] .flip-slide-back .btn{ background-color: #00b45a;}
.slide[data-tipo="Hematology"] .flip-slide-back .btn{ background-color: #e01e1e;}
.slide[data-tipo="Cytology"] .flip-slide-back .btn{ background-color: #c91ee0;}
.slide[data-tipo="Other"] .flip-slide-back .btn{ background-color: #7a7522;}

.flip-slide-back .lensyannots{width: calc(100% + 12px); height: 15px; position: absolute; left: -6px; top: -18px; font-size: 12px; line-height: 12px; color: #0056d7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip-slide-back .fechayannots{width: calc(100% - 45px); height: 15px; position: absolute; left: -6px; bottom: -18px; font-size: 12px; line-height: 12px; color: #0056d7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide[data-tipo="Pathology"] .flip-slide-back .fechayannots, .slide[data-tipo="Pathology"] .flip-slide-back .lensyannots{ color:#1091db;}
.slide[data-tipo="Polarized"] .flip-slide-back .fechayannots, .slide[data-tipo="Polarized"] .flip-slide-back .lensyannots{ color:#5e10db;}
.slide[data-tipo="Histology"] .flip-slide-back .fechayannots, .slide[data-tipo="Histology"] .flip-slide-back .lensyannots{ color: #00b45a;}
.slide[data-tipo="Hematology"] .flip-slide-back .fechayannots, .slide[data-tipo="Hematology"] .flip-slide-back .lensyannots{ color: #e01e1e;}
.slide[data-tipo="Cytology"] .flip-slide-back .fechayannots, .slide[data-tipo="Cytology"] .flip-slide-back .lensyannots{ color: #c91ee0;}
.slide[data-tipo="Other"] .flip-slide-back .fechayannots, .slide[data-tipo="Other"] .flip-slide-back .lensyannots{ color: #7a7522;}

.flip-slide .flip-slide-inner p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.flip-slide .flip-slide-inner p > small{ color:#3d54b1; }
.flip-slide .flip-slide-inner p > i{ position: absolute; right: -8px; top: -17px; }
.flip-slide .flip-slide-inner img{ border-radius: 5px; border: 1px solid #888; max-width: 100%;}
.flip-slide .flip-slide-inner pre{ position: relative; width: 100%; height: calc(100% - 10px); white-space: pre; }

@media only screen and (max-width: 1200px) {
  .slide{ height: 195px; }  
}
@media only screen and (max-width: 990px) {
  .slide{ height: 155px; }  
  .filterbtn{font-size: .8em !important; }
  .flip-slide .flip-slide-inner pre{font-size: .7em;}
  .search{width: 130px !important; }
}
@media only screen and (max-width: 770px) {
  .slide{ height: 128px; }
  .filterbtn{font-size: .7em !important; }
  .flip-slide .flip-slide-inner pre{font-size: .5em;}
  .coloverflowp{height:calc(100% - 145px) !important;}
  .userdata > span{font-size:10px !important; }
  .userdata > span::before{width:0px !important;}
}
@media only screen and (max-width: 570px) {
  .slide{ margin:0 1% 1% 0; width: 48%; height: 142px; }  
  .flip-slide .flip-slide-inner pre{font-size: .6em;}
}
@media only screen and (max-width: 350px){
  .slide{ height: 120px; }  
  .flip-slide .flip-slide-inner pre{font-size: .4em;}
}
/***List view***/
.coloverflowp[data-showlist="YES"] .slide{width:100%!important;height:auto!important;margin:4px 0!important;padding:1px 1px 1px 15px!important;border-radius:5px!important;position:relative!important;box-shadow: 0 0px 5px -4px #000!important;}
.coloverflowp[data-showlist="YES"] .slide:hover{box-shadow: 0 2px 10px -3px #000!important;}
.coloverflowp[data-showlist="YES"] .slide::before{content: attr(data-tipo); width: 100px; height: 17px; font-size: 8px; position: absolute; z-index: 10; color: #FFF; transform: translateY(0%) rotate(0deg); margin: 10px 0px 0px -62px;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Pathology"]::before{background-color:#1091db66;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Polarized"]::before{background-color:#5e10db66;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Histology"]::before{background-color:#00b45a66;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Hematology"]::before{background-color:#e01e1e66;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Cytology"]::before{background-color:#c91ee066;}
.coloverflowp[data-showlist="YES"] .slide[data-tipo="Other"]::before{background-color:#e0d31e66;}
.coloverflowp[data-showlist="YES"] .flip-slide{perspective:none;}
.coloverflowp[data-showlist="YES"] .flip-slide:hover .flip-slide-inner{transform:none!important;}
.coloverflowp[data-showlist="YES"] .flip-slide-inner{position:relative;display:grid;grid-template-columns:56px minmax(200px,1.2fr) minmax(120px,1fr) minmax(160px,0.6fr) auto;align-items:center;gap:4px 8px;padding:4px 5px;border:1px solid #d6d6d6;border-radius:6px;background:#f8f9fb;}
.coloverflowp[data-showlist="YES"] .flip-slide-front,.coloverflowp[data-showlist="YES"] .flip-slide-back{display:contents;position:static;-webkit-backface-visibility:visible;backface-visibility:visible;}
.coloverflowp[data-showlist="YES"] .flip-slide-front img{grid-column:1;grid-row:1;display:block;width:56px;height:auto;border-radius:4px;border:1px solid #cfcfcf;}
.coloverflowp[data-showlist="YES"] .flip-slide-front p{grid-column:2;grid-row:1;margin:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.coloverflowp[data-showlist="YES"] .flip-slide-front p>i{display:none;}
.coloverflowp[data-showlist="YES"] .flip-slide-back .lensyannots{grid-column:3;grid-row:1;position:static;margin:0;font-size:12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.coloverflowp[data-showlist="YES"] .flip-slide-back .fechayannots{grid-column:4;grid-row:1;position:static;margin:0;font-size:12px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.coloverflowp[data-showlist="YES"] .flip-slide-back .btn{grid-column:5;grid-row:1;position:static;justify-self:end;align-self:center;padding:2px 8px;font-size:.75em;line-height:1.2;}
.coloverflowp[data-showlist="YES"] .flip-slide-back pre{display:none;}

@media (max-width:990px){
  .coloverflowp[data-showlist="YES"] .flip-slide-back .btn{display: none;}
}
@media (max-width:700px){
  .coloverflowp[data-showlist="YES"] .flip-slide-inner{grid-template-columns:50px minmax(200px,2fr) minmax(110px,1fr) minmax(130px,1fr) auto;gap:3px 6px;padding:4px 6px;}
  .coloverflowp[data-showlist="YES"] .flip-slide-front img{width:50px;}
}
@media (max-width:520px){
  .coloverflowp[data-showlist="YES"] .flip-slide-inner{grid-template-columns:48px 1fr auto;gap:3px 6px;}
  .coloverflowp[data-showlist="YES"] .flip-slide-back .lensyannots,
  .coloverflowp[data-showlist="YES"] .flip-slide-back .fechayannots{display:none;}
}


/*********************************/ 
/************ TABLE **************/
/*********************************/
.table.casos {table-layout: fixed;}
.table.casos tr td > img{ max-width: 100px; border: 1px solid #333; border-radius: 5px; }
.table.casos tr th > img{ max-width: 120px; border: 1px solid #666; border-radius: 3px; }
.table.casos tbody tr th > span.btn.pabsolute{ display: none; }
.table.casos tbody tr:hover th > span.btn.pabsolute{ display: inline-block; }
.table.casos thead{ font-size: 14px; line-height: 30px; }
.table.casos tr td[data-tipo="txt"]{ white-space: pre; font-family: 'Consolas','Courier New', Courier, monospace; cursor: url('../img/edit_badge_24p.cur'), auto; }
.table.casos tr td[data-tipo="sel"],
.table.casos tr td[data-tipo="gru"]{ cursor: url('../img/edit_badge_24p.cur'), auto; }
.table.casos tr td[data-tipo="sel"] select,
.table.casos tr td[data-tipo="gru"] select{ width: 150px; }
.table.casos tr td[data-tipo="gru"]{ max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table.casos tr td[data-tipo="gru"] .gru-list{ margin: 0; padding: 0; list-style: none; }
.table.casos tr td[data-tipo="gru"] .gru-list li { margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table.casos tr td[data-tipo="gru"] .gru-list li::before { content: "🏢"; }
.table.casos tbody tr:hover{background-color: rgba(255,255,255,0.8);}
.table.casos tr td > div.opts{ display: none; text-align: right;}
.table.casos tbody tr:hover td > div.opts{display: block;}
.table.casos tr td div.truncate5 {display: -webkit-box; line-clamp: 5; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.table.casos tr td.toReorder ul{ padding-left:20px; }
.table.casos tr td.toReorder.ulperson ul{ color: #0056d7; list-style: square inside url("../images/person_16p.png");}
.table.casos tr td.toReorder.ulslide ul{ color: #362d6f; list-style: square inside url("../images/slide_16p.png");white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


/*********************************/ 
/******** ADD NEW SLIDE **********/
/*********************************/
.newslidewrapper{ display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.5) url('../img/bgpopwhite.png'); }
.newslidewrapper.open{ display: block; }
.newslidecontent{ width: 80%; margin: 10%; padding: 20px; background:#FFF; border-radius: 10px; box-shadow: 0 0 10px -3px #000; }
.newslidecontent .textopre{ white-space: pre; font-family: 'Consolas','Courier New', Courier, monospace; }
.newslidecontent table{ width: 100%; }
.newslidecontent table tbody tr.Pathology img{ border: 2px solid #1091db; border-radius: 4px; border-left-width: 5px;}
.newslidecontent table tbody tr.Polarized img{ border: 2px solid #5e10db; border-radius: 4px; border-left-width: 5px;}
.newslidecontent table tbody tr.Histology img{ border: 2px solid #00b45a; border-radius: 4px; border-left-width: 5px;}
.newslidecontent table tbody tr.Hematology img{ border: 2px solid #e01e1e; border-radius: 4px; border-left-width: 5px;}

/*********************************/ 
/******** SLIDE VIEWER ***********/
/*********************************/
.slideviewer{z-index: 50; height: calc(100% - 60px); position: relative;}
.slideviewer .titulo{ font-size: 1.2em; background-color: rgba(255,255,255,0.7); }
.slideviewer .titulo small{ color:#3d54b1; }

.slideviewer .visorwrapper{width: 100%; height: calc(100% - 40px);}
.slideviewer .visorwrapper .columnagallery{ background-color: rgba(255,255,255,0.7); width: 250px; height: 100%; float: left;}
.slideviewer .visorwrapper .columnagallery .botones{width: 100%; padding: 5px; height: 50px;}
.slideviewer .visorwrapper .columnagallery .botones .btn{width: 100%; height: 100%; line-height: 30px !important;}

.slideviewer .visorwrapper .columnagallery .minimappa{ height: 120px; padding: 5px; }
.slideviewer .visorwrapper .columnagallery .minimappa > img{width: 100%; border-radius: 8px; border: 1px solid #333; box-shadow: 0 2px 12px -5px #000;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap{ padding: 5px; height: calc(100% - 120px); overflow: hidden; }

.slideviewer .visorwrapper .columnagallery .roisgallerywrap .btnsprevnext{padding: 0px 9px 18px; height: 50px; text-align: center;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .btnsprevnext > .btn{width: 105px;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery{height: calc(100% - 70px); overflow-x: hidden; overflow-y: scroll; padding-right: 5px;}

.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi{width: 100%; border: 3px solid #AAA; border-radius: 5px; margin-bottom: 5px; overflow: hidden; cursor: pointer; position: relative;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi:hover{border-color: #777;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi > small{ position: absolute; padding: 1px 9px 1px 6px; font-size: .75em; background: #AAA; border-bottom-right-radius: 8px; }
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi > img{width: 100%;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi.selected{border-color: #0056d7;}
.slideviewer .visorwrapper .columnagallery .roisgallerywrap .gallery .roi.selected > small{background: #0056d7; color: #EEE;}

.slideviewer .visorwrapper .columnavisor{ width: calc(100% - 250px); height: 100%; float: right;}
.slideviewer .visorwrapper .columnavisor .tools{z-index: 55; position: absolute; background-color: rgba(255,255,255,0.7); padding: 5px; height: 50px; width: calc(100% - 250px); box-shadow: 2px 2px 4px -2px #000;}
.slideviewer .visorwrapper .columnavisor .tools > b{line-height: 45px;}
.slideviewer .visorwrapper .columnavisor .tools > span.btn{ float: right; margin-right: 10px; height: 100%; line-height: 30px !important; background-color: #9f3c54 !important; }
.slideviewer .visorwrapper .columnavisor .tools > span.btn.c2{background-color: #b1733d !important;}
.slideviewer .visorwrapper .columnavisor .tools > span.btn.c2.open{background-color: #d3721e !important;}
.slideviewer .visorwrapper .columnavisor .tools > span.btn.c3{background-color: #b1733d !important; padding: 6px 0px !important;}
.slideviewer .visorwrapper .columnavisor .tools > span.btn.c3.open{background-color: #d3721e !important;}

.slideviewer .visorwrapper .columnavisor .tools > span.btn[data-onoff="on"]{box-shadow: inset 0 0 4px #000; background-color: #a83333 !important;}
.slideviewer .visorwrapper .columnavisor .tools > span.btn:hover{opacity: .85;}

.slideviewer .visorwrapper .columnavisor .viewer{width: 100%; height: calc(100% - 0px); overflow: hidden; }
.slideviewer .visorwrapper .columnavisor .viewer:hover,
.slideviewer .visorwrapper .columnavisor .viewer.fullpage:hover{cursor: url('../img/cur_ManoA.cur'), auto;	}
.slideviewer .visorwrapper .columnavisor .viewer:active,
.slideviewer .visorwrapper .columnavisor .viewer.fullpage:active{cursor: url('../img/cur_ManoC.cur'), auto;}
.slideviewer .visorwrapper .columnavisor .viewer.drawing:hover,
.slideviewer .visorwrapper .columnavisor .viewer.fullpage.drawing:hover,
.slideviewer .visorwrapper .columnavisor .viewer.drawing:active,
.slideviewer .visorwrapper .columnavisor .viewer.fullpage.drawing:active{cursor: url('../img/cur_Pen.cur'), auto;}

.slideviewer .visorwrapper .columnavisor .datidelcaso{ width: calc(100% - 250px); z-index: 50; height: 0px; margin-top: 50px; overflow: hidden; background-color: rgba(255,255,255,0.5); padding: 0px; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease;}
.slideviewer .visorwrapper .columnavisor .datidelcaso.open{height: 260px;}
.slideviewer .visorwrapper .columnavisor .datidelcaso > div{ display: block; white-space: pre; font-size: .8em; background-color: rgba(255,255,255,0.8); position: relative; overflow-x: hidden; overflow-y: scroll; padding: 20px; width: calc(100% - 40px); max-height: 220px; margin: 20px; }

.slideviewer .visorwrapper .columnavisor .filterspanel{ width: 0; height: calc(100% - 50px); z-index: 50; right: 0; margin-top: 50px; overflow: hidden; background-color: rgba(255,255,255,0.5); padding: 0px; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease;}
.slideviewer .visorwrapper .columnavisor .filterspanel.open{ width: 250px;}
.slideviewer .visorwrapper .columnavisor .filterspanel .tit{ height: 25px; line-height: 25px; font-size: 18px; margin: 10px 20px; width: 210px;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter{ display: block; overflow-x: hidden; overflow-y: scroll; width: 230px; height: calc(100% - 100px); margin: 0 0 20px 20px; padding: 10px; background-color: rgba(255,255,255,0.8);}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro{width: 100%; margin-bottom: 3px; border-radius: 8px; display: block; padding: 5px 8px 8px 8px; }
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro:hover{box-shadow: 0 0 4px -2px #000;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro > span{color:#999; font-size: .8em; display: block; margin-bottom: 0px; cursor: pointer;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro > span[data-onoff="on"]{color:#9f3c54;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro > span > i{font-size: 20px;}


/*********************************/ 
/********** TRACKBAR *************/
/*********************************/
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer{width: 150px; margin-left: 25px; position: relative; }
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer::before{position: absolute; width: 16px; height: 16px; content: " "; margin: 0 0 0 -20px;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.S::before{color: #000; content: "S";}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.R::before{color: #F00; content: "R";}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.G::before{color: #0C0; content: "G";}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.B::before{color: #00F; content: "B";}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer .slider { z-index: 20; position: relative; -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 5px; background: #d3d3d3; outline: none; }
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 20px; border-radius: 20px 20px 5px 5px; background: #9f3c54 !important; cursor: pointer; }
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.S .slider::-webkit-slider-thumb{width: 12px; height: 17px; background: #555 !important;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.R .slider::-webkit-slider-thumb{width: 12px; height: 17px; background: #F55 !important;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.G .slider::-webkit-slider-thumb{width: 12px; height: 17px; background: #5C5 !important;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro .slidecontainer.B .slider::-webkit-slider-thumb{width: 12px; height: 17px; background: #55F !important;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro datalist{ display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 136px; height: 0px; margin: 0 7px; position: relative; z-index: 10;}
.slideviewer .visorwrapper .columnavisor .filterspanel .wrapfilter .filtro datalist option{ padding: 0; border-left: 1px solid #d3d3d3; margin: -20px 0px 0px 0px; }


/*********************************/ 
/********** ANNOTORIOUS **********/
/*********************************/
.slideviewer .visorwrapper .columnavisor .anno_toolbar{ width: calc(100% - 250px); z-index: 60; height: 0px; margin-top: 50px; overflow: hidden; background-color: rgba(255,255,255,0.5); box-shadow: 2px 2px 4px -2px #000; padding: 0px; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease;}
.slideviewer .visorwrapper .columnavisor .anno_toolbar.open{height: 50px;}

.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno{ width: 100%; }
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > div.tit{float: right; margin:20px 20px 0 0; font-size: .7em;}
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > div.tit > small{border-radius: 6px; background-color: #FFF; padding: 4px 5px; }
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn,
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn2{ float: right; margin: 10px 10px 0 0;  background-color: #3d54b1 !important; padding: 7px 9px 5px !important; transition: all .3s ease; -webkit-transition: all .3s ease;}
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn[data-onoff="on"],
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn2[data-onoff="on"]{box-shadow: 0 0 3px #3d54b1; background-color: #3d8cb1 !important;}
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn:hover,
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno > .btn2:hover{opacity: .85;}
.slideviewer .visorwrapper .columnavisor .anno_toolbar .wraptoolsanno .allcoms{float: left; margin: 15px 5px 11px 15px; }


/*********************************/ 
/*********** FOOTER **************/
/*********************************/
footer{position: absolute; bottom: 0; color: #FFF; font-size: 0.75em; font-weight: lighter; padding: 0 10px; z-index: 0;}


/*********************************/ 
/*********** ALERTAR *************/
/*********************************/
	.alerta{ max-width: 50%; top: 30%; left: 30%; min-width: 340px; min-height: 100px; position: absolute; background-color: #DDD; color: #333; border: 1px solid #555; z-index: 1001; -webkit-box-shadow: 1px 2px 10px 0 #000; box-shadow: 1px 2px 10px 0 #000; border-radius: 5px; overflow:hidden; }
	.alertaModal{position: fixed; bottom: 0; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.5); z-index: 1000;}
	@media screen and (max-width: 1024px){.alerta{ width: 60%; margin: 0 0 0 20%;} }
	.alerta .tit{ font-size: 1.3em; display: block; background-color: #AAA; color: #FFF; padding: 5px 10px 5px 10px; overflow: hidden; cursor: grab;}
	.alerta .tit.grabbing{ cursor: grabbing; }
	.alerta .tit > div{display: inline-block; padding-top: 5px; }
	.alerta .tit > div::before{ color: #FFF; margin-right: 1em; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: bootstrap-icons !important; content: " "; float: left; margin: -4px 1em 0 0; }
	.alerta .tit > div.aler::before{content: "\f332";}
	.alerta .tit > div.error::before{content: "\f33A";}
	.alerta .tit > div.info::before{content: "\f430";}
	.alerta .tit > div.quest::before{content: "\f506";}
	.alerta .tit span::after{ color: #FFF; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: bootstrap-icons !important; content: "\f659"; float: right; margin: 3px 0 0 0; cursor: pointer; }
	.alerta .tit span:hover::after{color: #FF0;}
	.alerta .btns{ padding: 5px 10px 10px 10px; height: 45px; background: #EEE; }
	.alerta .btns > span{float:left; margin-left:10px; font-size:20px; font-weight:bold; color:#2b78C6; }
	.alerta .btns button{ float: right; height: 30px; padding: 0 25px;  border: none; color: #FFF; background-color: #AAA; cursor: pointer; margin-left: 10px; }
	.alerta .btns button:hover{color: #FF0; -webkit-box-shadow: 0px 0px 8px -3px #FF0; box-shadow: 0px 0px 8px -3px #FF0; }
	.alerta .btns button.ok:hover{-webkit-box-shadow: 0px 0px 8px -1px #27aa27; box-shadow: 0px 0px 8px -1px #27aa27;}
	.alerta .btns button.cancel:hover{-webkit-box-shadow: 0px 0px 8px -3px #C00; box-shadow: 0px 0px 8px -3px #C00;}
	.alerta .cor{ padding: 20px 1.8em; overflow-x: scroll; }
	.alerta .cor pre{ font-size: 1.5em; }
	/*alert colors*/
	.alerta.blue .tit, .alerta.blue .btns button{    background-color: #2b78C6; }/*007BFC | 2b78C6*/
	.alerta.red .tit, .alerta.red .btns button{      background-color: #C93931; }/*DC3440 | C93931*/
	.alerta.green .tit, .alerta.green .btns button{  background-color: #138673; }/*27A844 | 138673*/
	.alerta.orange .tit, .alerta.orange .btns button{background-color: #C0652E; }/*FFC128 | C0652E*/
	.alerta.tea .tit, .alerta.tea .btns button{      background-color: #437C8D; }
	.alerta.purple .tit, .alerta.purple .btns button{background-color: #534666; }
	.alerta.yellow .tit, .alerta.yellow .btns button{background-color: #FFBF00; }
/*********************************/ 
/********* ANIMATIONS ************/
/*********************************/
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spinn {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
/*********************************/ 
/********* SCROLLBAR *************/
/*********************************/
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}