/*
 * Style tweaks
 * --------------------------------------------------
 */

:root 
{
  --white: #fff;
  --black: #000;
  --tab-bg-colour: #727272;
  --modal-header-colour: #FE0000;
} 

/* ------------------------------------- */
/* theme switching */
html[data-theme='dark'] 
{
  --global-bg-color: #444;
  --global-text-color: #ddd;
  --global-link-color: yellow;
  --global-link-hover: lightyellow;
  
  /*--modal-header-colour: blue;*/
}

html[data-theme='psi'] 
{
  --global-bg-color: #444;
  --global-text-color: #ddd;
  --global-link-color: yellow;
  --global-link-hover: lightyellow;
}
/* ------------------------------------- */
 
*{
    font-family: verdana, Arial, Helvetica, sans-serif;    
    font-weight: normal;
}
 
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  
  font-size: 90%;  
}

html
{
    transition: all 1s;    
}

body {
  padding-top: 0px;
    
  background: none;
}

a 
{
    text-decoration: none;
    transition: all 1s;
}

#page 
{
    background: #fff;

}

footer {
    padding: 30px 0;
    text-align: center;
}

html, body{height:100%; margin:0;padding:0}

.font-family-helvetica {
    font-weight:400; 
    font-style:normal;
}

p {
    font-weight:400; font-style:normal;
}

/**************** ipad **************/

div.site-locked 
{
    width: 300px; 
    height: 100px; 
    
    margin: 0 auto;

    background-image: url(../images/site-locked.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-size: 290px 97px;
}

.fileinput-preview
{
    position: relative;
    width: 170px; 
    height: 170px; 
    background: #ddd; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}

.fileinput-preview .remove
{
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 5;
    padding: 2px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 22px;
    width: 22px;
    overflow: hidden;
    opacity: 0;
}

.fileinput-preview .remove:hover
{
    opacity: 1.0;
    cursor: pointer;
}

.fileinput-preview .inner
{
    padding: 4px; 
    width: 160px;
    height: 160px;
    margin-top: 2px;
    margin-left: 2px;
    overflow: hidden;
    line-height: 156px;
}

.fileinput-preview .inner > img
{
    vertical-align: middle;
    padding: 0;
}

.fileinput-preview-container .removed
{
    display: none;
}

.flyover 
{
   left: 150%;
   overflow: hidden;
   position: fixed;
   width: 50%;
   opacity: 0.9;
   z-index: 2050;
   transition: left 0.6s ease-out 0s;
}
 
.flyover-centered 
{
   top: 50%;
   transform: translate(-50%, -50%);
}

.flyover.in 
{
   left: 50%;
}

.flyover-bottom {
   bottom: 10px;
}

ul.sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
ul.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 40px; }
ul.sortable li span { position: absolute; margin-left: -1.3em; }
ul.sortable li:hover{ cursor: pointer; }

.button-click
{
    cursor: pointer;
}

.input-mini { width: 60px !important; } 
.input-mini-1 { width: 70px !important; } 
.input-mini-2 { width: 80px !important; } 
.input-small { width: 90px !important; } 
.input-small-1 { width: 110px !important; } 
.input-small-2 { width: 130px !important; } 
.input-medium { width: 150px !important; } 
.input-medium-1 { width: 170px !important; } 
.input-medium-2 { width: 190px !important; } 
.input-large { width: 210px !important; } 
.input-xlarge { width: 270px !important; } 
.input-xxlarge { width: 530px !important; } 

.control-inline
{
    display: inline;
}

.control-left-offset-1 { margin-left: 2px; }
.control-left-offset-2 { margin-left: 4px; }
.control-left-offset-3 { margin-left: 6px; }
.control-left-offset-4 { margin-left: 8px; }
.control-left-offset-5 { margin-left: 10px; }
.control-left-offset-6 { margin-left: 15px; }
.control-left-offset-7 { margin-left: 20px; }

.panel-default > .panel-heading.info {
  background-color: #9BDFBB;
}
 
:focus{
    outline:none;
}
 
div.clear{
    clear:both;
}      

.fa.my-grow:hover{
  font-size:3em;
  transition: 0.5s ease-out;
}

.button-click:hover
{
    cursor: pointer !important;     
}

a.ui-tabs-selected
{
    color: black !important;
    font-weight: 800;
}

.clickable:hover
{
    cursor: pointer;   
}

.margin-left-50
{
    margin-left: 50px;    
}

.fa.fa-copy:hover, .fa.fa-file-pdf-o:hover, .fa.fa-edit:hover, .fa.fa-eye:hover, .fa.fa-lock:hover, 
.fa.fa-unlock-alt:hover, .fa.fa-file-text-o:hover, .fa.fa-download:hover, .fa.fa-file-excel-o:hover
{
  font-size: 1.5em;
  transition: 1s ease-out;
}

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.modal-dialog.modal-sm { width: 300px; } /* missing in bootstrap 4.5 */
.modal-dialog.modal-md { width: 500px; } /* missing in bootstrap 4.5 */
.modal-dialog.modal-lg { width: 800px; } /* missing in bootstrap 4.5 */
.modal-dialog.modal-xl { width: 1140px; } /* missing in bootstrap 4.5 */

.fileinput-preview,
.fileinput-preview-photo
{
    position: relative;
    width: 170px; 
    height: 170px; 
    background: #ddd; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}

.fileinput-preview-photo
{
    width: 90px; 
    height: 90px;     
}

.fileinput-preview .remove
{
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 5;
    padding: 2px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 22px;
    width: 22px;
    overflow: hidden;
    opacity: 0.5;
    text-align: center;
}

.fileinput-preview .remove:hover
{
    opacity: 1.0;
    cursor: pointer;
}

.fileinput-preview > .inner, 
.fileinput-preview-photo > .inner
{
    padding: 4px; 
    width: 160px;
    height: 160px;
    margin-top: 2px;
    margin-left: 2px;
    overflow: hidden;
    line-height: 156px;
}

.fileinput-preview-photo > .inner
{
    width: 80px;
    height: 80px;
    line-height: 76px;    
}                                    

.fileinput-preview .inner > img, 
.fileinput-preview-photo .inner > img
{
    vertical-align: middle;
    padding: 0;
}

.fileinput-preview-container .removed
{
    display: none;
}

#photo-preview-area,
#photo-preview-area-2 
{
    row-gap: 5px;
    column-gap: 5px;
}

.btn-group button {
  background-color: #4EB1FF;
  border: 1px solid #ccc;
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3C51FF;
}

.btn-group button.selected
{
  background-color: #0024A2;    
}

.btn-upload-fix
{
    color: #fff !important;   
}

/* ----------------------- */

.fa-hand-point-left
{
    color: #ccc;    
}

.fa-hand-point-left:hover
{
    cursor: pointer;
    color: #000;    
}

.fa-tasks
{
    color: #aaa;
}

.fa-tasks:hover
{
    color: #0024A2;
}

/* -------------------------------- */
/* fancy buttons menu
/* -------------------------------- */


@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.navbar-bgcolor {
  background: #000;
  background-image: url(../images/psi-background.jpg) !important;
  background-repeat: repeat-x;
  background-position: center;
  animation: animatedBackground 20s linear infinite alternate;
}

.icon-type-1
{
    color: #7F7F7F;  
    cursor: pointer;  
}

@keyframes blinker-sf-applied {
  50% {
    opacity: 0.4;
  }
}

.icon-type-1.sf-applied
{
    color: green;
    animation: blinker-sf-applied 1s linear infinite;      
}

.icon-type-1:hover
{
    color: red;    
}

#page-title span
{
    display: inline-block;
    font-size: 140%;
    font-weight: bold;  
    animation: fix 0.00000001s;  
}

@-moz-keyframes fix {
   from { padding-right: 1px; } 
   to { padding-right: 0; } 
}

#page-title span::first-letter 
{
    font-size: 150% !important;
    font-style: italic;    
}

#page-title a:not([class*="link-"]),
#page-title span a:not([class*="link-"])
{
    color: red;
    font-weight: bold;
    font-family: verdana;
}

#page-title a:hover,
#page-title span a:hover
{
    color: #7F7F7F;
}

.modal-backdrop
{
    opacity: 0.1 !important;
}

.modal-content.dark
{
    background-color: #1e2229;
    color: #fff;
}

.modal-content.dark .modal-header,
.modal-content.dark .modal-footer {
    border-color: #424242;
}

.modal-content.dark .form-control {
    background-color: #282d36;
    border-color: #282d36;
    color: #fff;
}

.bi.bi-2x
{
    font-size: 150% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bi.bi-3x
{
    font-size: 200% !important;
}

.bi.bi-4x
{
    font-size: 250% !important;
}

.bi.bi-5x
{
    font-size: 350% !important;
}

.psi-tooltip-fields
{
    display: inline-block;
    color: red;
    font-style: italic;    
    font-weight: bold;
    margin: 0;
}

.clients-select-link
{
    display: inline-block !important;
    text-align: center;;    
}

.clients-select-link:hover
{
    /*background: #78786F;*/
    color: red;
}

/* modal draggable */

.draggable_modal 
{
    position: relative;
}

.draggable_modal .modal-dialog 
{
    position: fixed;
    max-width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background: var(--white);
    /* width:500px; */
    margin: 0;
    /* padding: 20px; */
    /* overflow: hidden; */
    /* resize: both; */
}

.draggable-modal .modal-content 
{
    /* padding: 20px; */
    height: 400px;
    overflow: hidden;
    resize: both;
    width: 500px;
}

.draggable-modal .modal-body 
{
    height: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.draggable-modal .modal-header 
{
    background: var( --modal-header-colour );
    color: var( --black );
        
    border-bottom: 0px;
    padding: 0px;
    cursor: move;
}

.draggable-modal .modal-header h3 
{
    color: var(--white);
    font-size: 18px;
}

/*
.draggable-modal .close-btn {
  top: -2px;
  margin: 0px !important;
  opacity: 1;
  width: 30px;
  height: 30px;
  padding: 0px;
  color: #000;
}
*/

.draggable-touch {
  cursor: move;
}

/*
label 
{
    color: #B4886B;
    font-weight: bold;
    display: block;
    width: 100px;
    float: left;
}

label:after 
{ 
    content: ": " 
}
*/

.custom_tab_on_editor {
  background: var(--tab-bg-colour);
  padding: 0px;
  margin: 0px;
  
  background: #fff;
}

.custom_tab_on_editor .nav-item {
  margin-bottom: 0px;
  
  background: #ccc;
  color: #111;
}

.custom_tab_on_editor .nav-item .nav-link {
  min-width: 100px;
  text-align: center;
  border: 0px solid transparent;
  border-radius: 0px;
  padding: 10px;
  color: #111;
}

.custom_tab_on_editor .nav-item .nav-link:hover {
  color: #ffffff;
  border-width: 0px;
  background: #FF602E;
  border-bottom: 0px solid transparent;
}

.custom_tab_on_editor .nav-item.show .nav-link,
.custom_tab_on_editor .nav-link.active {
  color: #ffffff;
  border-width: 0px;
  background: red;
  border-bottom: 0px solid transparent;
  position: relative;
}

.custom_tab_on_editor .nav-item.show .nav-link:before,
.custom_tab_on_editor .nav-link.active:before {
  content: "";
  border-bottom: 10px solid var(--white);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

/* crazy batman newspaper spinny thing */
 .rotate {
    transform:rotate(180deg);
    transition:all 0.5s;
}
.rotate.in {
    transform:rotate(1800deg);
    transition:all 1.5s;
}

.offcanvas-top.h-auto {
    bottom: initial;
}

.offcanvas-end.w-auto {
    left: initial;
}

a.link-bold
{
    font-weight: bold;
}

body.modal-open {
  overflow-y: inherit !important;
}

/* jquery confirm overides */
.jconfirm-buttons
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@font-face {
    font-family: 'text-security-disc';
    src: url('fonts/text-security-disc-compat.eot');
    src: url('fonts/text-security-disc-compat.eot?#iefix') format('embedded-opentype'),
        url('fonts/text-security-disc.woff2') format('woff2'),
        url('fonts/text-security-disc-compat.ttf') format('truetype');
}

input.password {
    font-family: 'text-security-disc';
}

/*
select.select-with-fa option
{
    background: red;
    content: "\f067";    
}
*/

.breadcrumb-item.psi span
{
    color: #aaa !important;    
}

.breadcrumb-item.psi:not(.active) span:hover
{
    color: red !important;
    background: #eee !important;
}

.breadcrumb-item.psi.active span
{
    color: #000 !important;
    background: red !important;
    font-weight: 900 !important;    
}

.ui-sortable tr {
    cursor:pointer;
}
        
.ui-sortable tr:hover {
    background:rgba(244,251,17,0.45);
}

.ui-sortable div.method {
    cursor:pointer;
}
        
.ui-sortable div.method:hover {
    background:rgba(244,251,17,0.45);
}

.nav-link.active 
{
    color: #E20E3E !important;
}

#menu-user-icon
{
    color: #E20E3E;
    
    opacity: 0.2;
    transition: all 1s ease-out;    
}

#menu-user-icon:hover,
#menu-user-icon.focus
{    
    opacity: 1.0;
    transition: all 1s ease-in;    
}

.hover-colour.blue:hover
{
    color: #489CAE;
}