/* Common File window classes */
@import 'imatch-filewindow.css';

/* Overlays used in the file window */
@import 'imatch-filewindow-overlays.css';

.ptc-m-t-10 {
  margin-top: 10px !important;
}
.ptc-m-b-10 {
  margin-bottom: 10px !important;
}
.ptc-m-l-10 {
  margin-left: 10px !important;
}
.ptc-m-r-10 {
  margin-right: 10px !important;
}

.ptc-p-t-10 {
  padding-top: 10px !important;
}
.ptc-p-b-10 {
  padding-bottom: 10px !important;
}
.ptc-p-l-10 {
  padding-left: 10px !important;
}
.ptc-p-r-10 {
  padding-right: 10px !important;
}

.ptc-nowrap {
    white-space: nowrap;
}

.ptc-text-dark
{
    color: #000 !important;
}

/* To style the size of SVG icons created from SVG files */

.ptc-svg-icon {
    height: 1em;
    width: auto;
}

.ptc-svg-icon-lg {
    height: 1.3333em;
    width: auto;
}

.ptc-strike-through {
    text-decoration:line-through;      
}

/* Remove dotted border outline for links in FF */
a, a:visited, a:focus, a:active, a:hover {
    outline:0 none !important;
}
button::-moz-focus-inner {
    border: 0;
}


/* See: https://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink */
/* This ensures that ng-cloak works */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

/* Make the icon stand it its own column */

.alert.ptc-alert-indent .fa::after {
    display:table-cell;
}

.alert.ptc-alert-indent > span {
    display:table-cell;
}

.alert.ptc-alert-indent > translate {
    display:table-cell;
}

.alert.ptc-alert-indent i:first-child { 
    float: left; 
    font-size: 1.5em; 
    padding-right: 0.75em;
    margin-left:0.25em;
    margin-top:0.2em;
    display:table-cell;
}

.filewindow-alert {
    font-size: 1.15em;
}


.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

/* The client area in the IMatch window, below the main navbar */
.ptc-imatch-client-area {
    width:100%;
    margin-top:-15px;
}

.ptc-navbar-default {
    margin-bottom: 5px !important;
}

.ptc-imatch-navigator-container {
    padding-left:5px !important;
    padding-right:5px;
    overflow-y: auto;
}

/* The footer under the Navigator */

.ptc-imatch-navigator-container-footer {
    margin-top:1px;
    padding:5px;
}

.ptc-imatch-navigator-container-footer a {
}

/* For the size controls inside the layout drop-down */

.ptc-navbar-default .layout-sizes-container {
    margin-top:10px;
    margin-bottom:10px;
    padding-left:20px;
}

.ptc-navbar-default  .layout-sizes-container span {
    margin-left: 10px;
    margin-right: 10px;
}

.ptc-navbar-default  .layout-sizes-container i:hover {
  -webkit-transform: scale(1.25,1.25);
  transform: scale(1.25,1.25);
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

/* Admin Panel */

.ptc-admin-progress {
    margin-bottom:0px !important;
    height:10px !important;
}

.ptc-admin-important {
    font-size: 1.25em;
    font-weight: bold;
}

.ptc-admin-huge {
    font-size: 1.75em;
    font-weight: bold;
}

.ptc-admin-large {
    font-size: 1.15em;
    font-weight: bold;
}

.ptc-admin-panel-col {
    padding-left:0 !important;
}

/* Filter Panels in the Navigator */

.filter-panel
{
    margin:-10px;
}

.filter-panel .panel-heading
{
}

.filter-panel .panel-body
{
    padding-top:2px;
    padding-bottom:5px;
}


.filter-panel .form
{
}

.filter-panel .form-group
{
}

.filter-all
{
    font-weight:bold;
}

/* The div for our filter selector */

.filter-selector
{
    margin-bottom:15px;
}

.filter-selector .checkbox
{
    /* Remove the unwanted extra margin from the first chexkbox */
    margin-top: -5px;
    /*padding-top:0px !important;*/
    /*white-space:nowrap;*/
}

.filter-selector .control-label
{
    padding-top:0;
}

.filter-selector .btn-bar
{
    margin-top: -5px;
}

.filter-toggle-btn
{
    color: #a0a0a0;
}

.filter-toggle-btn a:hover
{
    color: #ffffff;
}

/* Likes Panel */

.like-container {
    overflow-y:scroll; 
    overflow-x:hidden;
}

.like-grid {
    border: 1px solid #000000;
    list-style: none;
    background: #202020;
    box-sizing: border-box;
    -moz-box-sizing : border-box;
    /* This causes problems with grid updates (adding removing likes while the Likes panel is expanded) ... disabled for now*/
    /*-webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;*/
}

.like-grid-img {
    width: 100%;
    vertical-align: middle;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
    background-color: #202020;
    opacity: 0;
    visibility: hidden;
}
 
.like-grid-img.img-loaded {
    visibility: visible;
    opacity: 1;
}

 /* Angular Hotkeys style override for the cheat sheet */
 .cfp-hotkeys td
 {
     padding: 5px 10px;
 }

 .ptc-input-group-text-append {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
    padding-left:5px;
 }

 .ptc-input-group-text-prepend {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
    padding-right:5px;
 }

 /* Make sure modals are above the Viewer (Photoslide) */

 .modal {
     z-index: 2000 !important
 }

 /* Make sure the buttons in all modals have a minimum widh (for short texts like OK) */

.modal-footer .btn {
    min-width: 8em;
}

/* A full-width /height modal */ 

.modal-header .a-close:hover {
    transform:scale(1.5);
    transition: ease-in-out 0.2s;
}

/* Set this class in 'windowClass' of the modal defaults */
.modal-fullwidth {
    width: 100%;
    height: 100%;
}
.modal-fullwidth .modal-dialog {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin:0;
}
.modal-fullwidth .modal-dialog .modal-content {
    width: 100%;
    height: auto;
    min-height: 100%;
}
 
/* Colors uses for collections */

.collection-color-red
 {
    color: #ff5A5A;
 }
 
 .collection-color-green
 {
    color: #00ff00;
 }
 
 .collection-color-blue
 {
    color: #5050ff;
 }
 
 .collection-color-bookmark
 {
    color: #8080ff;
 }
 
/* The dashboard */
 
.dashboard-container {
    display: block;
    padding: 5px 5px;
    text-align: center;
    z-index: 1500;
}

.dashboard-container.dashboard-readonly {
    cursor: not-allowed;
}

.dashboard-container.dashboard-readonly a {
    cursor: not-allowed;
}

.dashboard-container:hover
{
    transition: 0.5s;
    -webkit-transition: 0.5s; 
}

  /* Wraps each group, for wrapping control*/
 .dashboard-container-group {
    display:inline-block;
 }

 .dashboard-container-btn
 {
    vertical-align: middle;
 }
 .dashboard-container-btn i
 {
     vertical-align: middle;
     margin-left: 10px;
 }

.dashboard-container .label-color-text
{
    text-shadow: 1px 1px #000000;
    padding: 2px 10px;
}

.dashboard-container .inactive
{
    opacity: 0.4;
}

 .dashboard-container .inactive:hover
 {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transition: 0.2s;
    -webkit-transition: 0.2s;
 }
 
 .dashboard-container .disabed
 {
    opacity: 0.2;
 }
 .dashboard-container .disabed:hover
 {
    opacity: 0.2;
 }

 
 /* PhotoSwipe Overloads */

.pswp__caption {
    /* border: solid 1px red; */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px;
}
  
.ptc-dashboard-pslide
{
    position: absolute;
    top: 44px;
    left:0;
    width:100%;
}

.ptc-dashboard-pslide.small {
    font-size: 0.75em;
}

.ptc-dashboard-psfooter
{
}

/* Prevent the navbar from breaking vertically */
.navbar-nav>li, .navbar-nav {
    float: left !important;
  }