/**
 * @file
 * Subtheme specific CSS.
 */

/* Fonts */
@font-face {
	font-family: 'Conv_Playball';
	src: url('fonts/Playball.woff') format('woff');
	font-weight: normal;
	font-style: normal;	
}
/* End Fonts */

/* Responsive Images */
img.resImg {
  max-width: 100%;
  height: auto;
}


/* Header Region */
div#main, footer.site-footer > div.container-fluid {
    /*max-width: 85%; */
    max-width: 1720px;
}

a.navbar-brand {
    color:#fffeff !important;
    /*font-size: calc(36px + 0.390625vw) !important; */
    font-size: 2.5rem;
    font-family:'Conv_Playball',Sans-Serif;
    margin: 0 3rem 0 1rem;
    
}

section.region-header-form, 
button.navbar-toggler {
    margin-right: 1rem;
}

#navbar-main {
    background-color: unset;
    padding: unset;
    background-color: #0b2938; /* Old browsers */
    background: linear-gradient(to bottom,  #0D3644 0%,#0b203a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b2938', endColorstr='#0b203a',GradientType=0 ); /* IE6-9 */
    border-bottom:1px solid #1b75bb;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,1);
}

/* Header Menu */

#superfish-mps-employee > li > ul > li {
    background-color: #0b2938;
}

ul.sf-menu > li > ul {
    background: #1b75bb;
}

ul.sf-menu a:hover {
    color: #0b2938 !important;
    background-color: #fffeff;
    border-radius: 2px;
}

ul.sf-menu a, 
ul.sf-menu span.nolink {
    color: #fffeff !important;
    padding: 1rem .8rem !important;
    text-decoration: none !important;
    transition: background,color .25s;
}

ul.sf-menu.menu li {
    margin: 0 .5rem;
}

ul.sf-menu .sf-sub-indicator {
    right: unset !important;
}

.navbar-toggler {
    background-color: #fffeff !important;
}
/* End Header Menu */
/* End Header */

/* Main Content */
#main {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.alert {
    text-align: center;
}


/* Spinner Overlay */
div#pageBlockOverlay {
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    opacity: .5;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

div.spinner-border {
    font-size: 4rem;
    width: 10rem;
    height: 10rem;
}
/* End Spinner Overlay */


/* Error Pages */
/* 403 */
/*@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");
html {
  height: 100%;
}*/

/*body {
  min-height: 100%;
  background-color: #111111;
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  overflow: hidden;
}*/

.police-tape {
  background-color: #e2bb2d;
  background: linear-gradient(180deg, #eed887 0%, #e2bb2d 5%, #e2bb2d 90%, #e5c243 95%, #0e0b02 100%);
  padding: 0.125em;
  font-size: 3em;
  text-align: center;
  white-space: nowrap;
  margin-top: 10rem;
}

.police-tape--1 {
  transform: rotate(10deg);
  position: absolute;
  top: 40%;
  left: -5%;
  right: -5%;
  z-index: 2;
  /*margin-top: 0;*/
}

.police-tape--2 {
  transform: rotate(-8deg);
  position: absolute;
  top: 50%;
  left: -5%;
  right: -5%;
}

.ghost {
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  height: 100vh;
}

.ghost--columns {
  display: flex;
  flex-grow: 1;
  flex-basis: 200px;
  align-content: stretch;
}

.ghost--navbar {
  flex: 0 0 60px;
  background: linear-gradient(0deg, #27292d 0px, #27292d 10px, transparent 10px);
  border-bottom: 2px solid #111111;
}

.ghost--column {
  flex: 1 0 30%;
  border-width: 0px;
  border-style: solid;
  border-color: #27292d;
  border-left-width: 10px;
  background-color: #191a1d;
}
.ghost--column:nth-child(1) .code:nth-child(1) {
  margin-left: 5.5em;
}
.ghost--column:nth-child(1) .code:nth-child(2) {
  margin-left: 4em;
}
.ghost--column:nth-child(1) .code:nth-child(3) {
  margin-left: 4em;
}
.ghost--column:nth-child(1) .code:nth-child(4) {
  margin-left: 4em;
}
.ghost--column:nth-child(2) .code:nth-child(1) {
  margin-left: 2.5em;
}
.ghost--column:nth-child(2) .code:nth-child(2) {
  margin-left: 4em;
}
.ghost--column:nth-child(2) .code:nth-child(3) {
  margin-left: 5.5em;
}
.ghost--column:nth-child(2) .code:nth-child(4) {
  margin-left: 3.5em;
}
.ghost--column:nth-child(3) .code:nth-child(1) {
  margin-left: 2.5em;
}
.ghost--column:nth-child(3) .code:nth-child(2) {
  margin-left: 2em;
}
.ghost--column:nth-child(3) .code:nth-child(3) {
  margin-left: 4em;
}
.ghost--column:nth-child(3) .code:nth-child(4) {
  margin-left: 4.5em;
}

.ghost--main {
  background-color: #111111;
  border-top: 15px solid #303338;
  flex: 1 0 100px;
}

.code {
  display: block;
  width: 100px;
  background-color: #27292d;
  height: 1em;
  margin: 1em;
}

.ghost--main .code {
  height: 2em;
  width: 200px;
}
/* End 403 */

/* 404 */
.c{
    text-align: center;
    display: block;
    position: relative;
    width:80%;
    margin:100px auto;
}
._404{
    font-size: 220px;
    position: relative;
    display: inline-block;
    z-index: 2;
    height: 250px;
    letter-spacing: 15px;
}
._1{
    text-align:center;
    display:block;
    position:relative;
    letter-spacing: 12px;
    font-size: 4em;
    line-height: 80%;
}
._2{
    text-align:center;
    display:block;
    position: relative;
    font-size: 20px;
}

.btn404{
    background-color: rgb( 255, 255, 255 );
    position: relative;
    display: inline-block;
    width: 358px;
    padding: 5px;
    z-index: 5;
    font-size: 25px;
    margin:0 auto;
    color:#33cc99;
    text-decoration: none;
    margin-right: 10px
}
            
.cloud {
    width: 350px; height: 120px;
    background: #000;
    background: linear-gradient(top, #000 100%);
    background: -webkit-linear-gradient(top, #000 100%);
    background: -moz-linear-gradient(top, #000 100%);
    background: -ms-linear-gradient(top, #000 100%);
    background: -o-linear-gradient(top, #000 100%);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    position: absolute;
    margin: 120px auto 20px;
    /*z-index:-1;*/
    transition: ease 1s;
}

.cloud:after, .cloud:before {
    content: '';
    position: absolute;
    background: #000;
    /*z-index: -1*/
}

.cloud:after {
    width: 100px; height: 100px;
    top: -50px; left: 50px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}

.cloud:before {
    width: 180px; height: 180px;
    top: -90px; right: 50px;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
}
            
.x1 {
    top:-50px;
    left:100px;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0.9;
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}
            
.x1_5{
    top:-80px;
    left:250px;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
    -webkit-animation: moveclouds 17s linear infinite;
    -moz-animation: moveclouds 17s linear infinite;
    -o-animation: moveclouds 17s linear infinite; 
}

.x2 {
    left: 250px;
    top:30px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; 
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x3 {
    left: 250px; bottom: -70px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.8; 
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x4 {
    left: 470px; botttom: 20px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.75;
    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
    -o-animation: moveclouds 18s linear infinite;
}

.x5 {
    left: 200px; top: 300px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.8; 
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
/* End 404 */

/* No/Suspended Company */
i.loadError {
    font-size: 20rem;
    color: #fc5f62;
}

h1.errorRed {
    color: red;
}

div.textCenter > i {
    font-size: 20rem;
    color: gray;
}
/* End No/Suspended Company */


/* End Error Pages */

/* Archive Search */
div.searchIconContain {
    text-align: center;
    padding-top: 10rem;
}

div.searchIconContain > i {
    font-size: 10rem;
    color: gray;
}
/* End Archive Search */

/* End Main Content */

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


/* Footer Region */

footer.site-footer {
    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
}

.site-footer .block {
    border: unset !important;
}

.site-footer__top h2, .site-footer__bottom {
    border-bottom: unset !important;
    border-top: unset !important;
}

span#playball {
    font-family:'Conv_Playball';
    font-size: calc(30px + 0.390625vw) !important;
}
/* End Footer */


/* Misc Styling */
h3.alert-dark {
    color: #4f5450;
}
/* End Misc Styling */


/* Datatables Styling */
div.dataTables_filter input {
    border: 1px solid #0d6efd;
}

div.dataTables_filter > label {
    animation-name: searchLabel;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes searchLabel {
  50% {
    color: #0d6efd;
    font-weight: bold;
  }
}

div.dataTables_length label, 
div.dataTables_filter label {
    display: flex;
    justify-content: left;
    align-items: center;
}

div.top > div.dataTables_length label select {
    margin: .3rem .4rem;
}

div.top > div.dataTables_length {
    float: left;
    margin-right: 1rem;
}

div.top > div.dataTables_filter,
div.top > div.dataTables_paginate {
    float: right;
    margin-left: 1rem;
}

div.bottom > div.dataTables_filter,
div.bottom > div.dataTables_paginate {
    float: right;
    margin-left: 1rem;
}

div.bottom > div.dataTables_info {
    float: left;
}

td .bi-chat-right {
    animation-name: noteColorR;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes noteColorR {
  50% {
    color: red;
  }
}

td .bi-chat-left {
    animation-name: noteColorL;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes noteColorL {
  50% {
    color: orange;
  }
}

table div.progress {
    border: 1px solid #0d6efd;
    margin-top: .5rem;
}

table span.hidden {
    visibility: hidden;
}

td i.action:hover {
    color: #0d6efd;
    cursor: pointer;
}

table.mps tr th {
    color: white !important;
    background: linear-gradient(to bottom, #134c60 0%,#0b203a 100%) !important;
    border-right: none;
}

table.mps tr th:first-child {
    border-top-left-radius: 3px;
}

table.mps tr th:last-child {
    border-top-right-radius: 3px;
}

table.mps tr td, 
table.mps tr th {
    border: unset;
    font-size: 1.1rem;
}

table.mps tbody tr:nth-of-type(odd){
    background: white;
}

table.mps tbody tr:nth-of-type(even){
    background: #f6f6f6;
}

/*table.mps tbody tr td:last-child:not(.noAction)*/
table.mps tbody tr td.actionColumn {
  border-left: 3px solid #0b203a;
}

table.mps a {
    color: unset;
}

/* .table tbody tr:hover {*/
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover a{
    background: linear-gradient(to bottom, #134c60 0%,#0b203a 100%) !important;
    color: white !important;
}

/*tr:hover a {
    background: linear-gradient(to bottom, #134c60 0%,#0b203a 100%) !important;
    color: white !important; 
}*/

table.mps .progress-bar {
    background-color: #1476bc;
}

div.curJobsbottomMargin {
    margin-bottom: 5rem;
}

/* Icons Styling */
table.mps i {
    float: left;
    font-size: 1.2rem;
    margin-right: .4rem;
}
/* End Icons Styling */

table.mps i.modified {
    color: red;
}


/* Row Styling */
table.mps .taskActive, 
table.mps .taskActive a {
    background-color:#badd96 !important;
    /*color:white !important;*/
}

/*.hasCom, .hasCom a {
    background:#57a5e5 !important;
    color:white !important;
}*/

table.mps .onHold, 
table.mps .onHold a {
    background:#dda796 !important;
    /*color:white !important;*/
}

table.mps .jobComplete, 
table.mps.jobComplete a {
    background:#ad96dd !important;
/*    color:white !important;*/
}

table.mps .boatBulk, 
table.mps .boatBulk a,
table.mps .isPiling, 
table.mps .isPiling a {
    background:#ddc996 !important;
    /*color:white !important;*/
}

table.mps .multi {
    float: right;
}
/* End Datatables Styling */



/* Bootstrap 5 popover/modal */
.popover {
    border: 2px solid #1476bc !important;
    max-width: 1000px !important;
}

.popover-header,
.modal-header {
    background-color: #0b203a !important; 
    color: #FFFFFF !important; 
    font-size: 1.2rem !important;
    text-align: center !important;
}

.popover-body {
    font-size: 1.2rem;
}

.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after, 
.bs-popover-top > .popover-arrow::after {
	border-top-color: #1476bc !important;
}

.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after, 
.bs-popover-bottom > .popover-arrow::after {
	border-bottom-color: #0b203a !important;
}

.popRedText {
    color: red !important;
}

.popOrangeText {
    color: orange !important;
}

.popBoldText {
    font-weight: bold;
}

.popFloatLeft {
    float: left;
}

div.comment {
    padding: .5rem;
    border-bottom: 1px solid #c6c6c6;
}

input#task_percent,
select#taskStatus {
    margin: 1rem auto; 
}
/* End Bootstrap 5 popover */

/* Breakpoints */
/* X-Small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    a.navbar-brand {
	font-size: 2rem;
        width: 3rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    
}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
    
}

/* End Breakpoints */