.content-page { margin-left: 0 !important; /* invisible LHS menu on wider screens */ }

#top-search::placeholder { color: #cc6600; } /* Search... text reported hard to see */

.dataTables_filter{
    visibility: hidden !important;
}

#swpPageTitle { color: white; }
#swpUserCompanyInfo {
    padding-left:10px;
    padding-right: 5px;
}

#swpUserEmailInfo {
    text-transform: lowercase;
    font-size:0.8em;
    padding-top:5px;
}

img.loading {
    height: 55px;
    padding-top:14px;
}
/* If you click item on side menu (swap screen) it may lag for a bit, so showing a loader here too. Uses unload event. Not compatible
with all browsers. */
img.swp-loader-menu {
    height: 30px;
    padding-top:0px;
}

/* These two cannot be a class, icons very touchy */
#iconInternetConnected {
    color: #096f70;
    display: none;
}
#iconInternetDisconnected {
    color: #4a4240;
    display: none;
}

/* Need some padding from top menu bar */
#swpMainContent { margin-top: 20px; }

#msgLoginError { display: none; }

/* back button on many pages */
#btnBackPage { float: left; margin-top:10px; padding:7px; color: #0a58ca !important; }

.btn-primary:active { background-color: #2447a3 !important; border-color: #2447a3; }
.btn-primary:hover { background-color: #2447a3 !important; border-color: #2447a3; }
.btn-primary { background-color: #4a78ef !important; border-color: #4a78ef; }


.navbar-custom, .nav-bordered, .nav-bordered a.active { background-color: #faa003; border-color: #faa003 !important; }
/* Tabs active buttons such as site list */
.nav-link.active { background-color: dodgerblue !important; border-color: #faa003 !important; }

.col-9 > #swpTabContent{
	padding: 20px !important;
    border: 1px solid #ddd;
    background: #fff;
}


/* Stops problem of tables stretching outside of pyshical browser width */
.table {
    word-wrap: break-word; /* does nothing without below */
    table-layout:fixed;
    /* width:auto !important;  */
    /* this template seems to hard set pixels, and when stretching, nothing moves. Which is an issue when rotating phone */
}

/*SHARED ON PORTAL + APP BELOW - Excluding SWP builder controls */


/* Used for Document Category listing and Document List */
.swpTiles {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, 285px) !important;
    margin: 10px;
}
/* Individual divs/other within swpTiles */
.swpTile {
    word-break: break-word;
    padding: 10px;
    border-radius: 25px;
    border: 2px solid #1b9ac1;
    background-color: #0a53be;
    text-align: center;
    color: white;
}
.swpTileImg {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .right-bar .btn-lg {
    font-size: 12px;
    padding: 18px 0;
  }

  .right-bar .btn-primary {
    border-bottom: 1px solid #3366CC;
  }

  .right-bar .btn-light {
    border-bottom: 1px solid #555;
  }

  .right-bar .btn-info {
    border-bottom: 1px solid #6699CC;
  }

  .right-bar .btn-secondary {
    border-bottom: 1px solid #666;
  }

  #qrcode {
    display: none;

  }
  
    
/*************************** 
Form Builder - Quill Paragraph
*****************************/

.swpBootstrapped > p ol, .formbuilder-paragraph ul {
    padding-left: 1.5em;
}

.swpBootstrapped > p ol > li,
.swpBootstrapped > p ul > li {
    list-style-type: none;
}

.swpBootstrapped > p ul > li::before {
    content: '\2022';
}

.swpBootstrapped > p li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}

.swpBootstrapped > p .ql-video {
    display: block;
    max-width: 100%;
}

.swpBootstrapped > p .ql-video.ql-align-center {
    margin: 0 auto;
}

.swpBootstrapped > p .ql-video.ql-align-right {
    margin: 0 0 0 auto;
}

.swpBootstrapped > p .ql-font-serif {
    font-family: Georgia, Times New Roman, serif;
}

.swpBootstrapped > p .ql-font-monospace {
    font-family: Monaco, Courier New, monospace;
}

.swpBootstrapped > p .ql-align-center {
    text-align: center;
}

.swpBootstrapped > p .ql-align-justify {
    text-align: justify;
}

.swpBootstrapped > p .ql-align-right {
    text-align: right;
}

.swpBootstrapped > p.ql-blank::before {
    color: rgba(0,0,0,0.6);
    content: attr(data-placeholder);
    font-style: italic;
    left: 15px;
    pointer-events: none;
    position: absolute;
    right: 15px;
}

.swpBootstrapped > p a {
    text-decoration: underline;
}

.swpBootstrapped > p img {
    max-width: 100%;
}


/*************************** 
SWPTAB - Coloring
*****************************/

.swp-tab-tick .nav-item.disabled{
    display: none !important;
}

/* .swptap-option, .swptap-option.active{
	color:white !important;
	background-color:#00875A !important;
} */

/*************************** 
Checkbox HOC
*****************************/

.swpRiskMatrixRegularFields .form-check-hoclabel{
    padding-right: 20px;
    padding-left: 5px;
}




/*************************** 
Select2 - require
*****************************/

.was-validated .custom-select-require:invalid + .select2 .select2-selection{
    border-color:#f1556c !important;
}
.was-validated .custom-select-require:valid + .select2 .select2-selection{
    border-color: #ced4da!important;
}
*:focus{
  outline:0px;
}

.rendered-form .form-control.is-valid, .was-validated .rendered-form .form-control:valid{
	border-color:#ced4da !important;
	background-image:none !important;
}

.was-validated .rendered-form .form-control:invalid{
	background-image:none !important;
}

.formbuilder-swpSignature .text-primary{
	color: #6c757d !important
}

/*************************** 
datatable
*****************************/
.dataTables_filter{
    display: none;
}

/*************************** 
Multiple TextBox
*****************************/
div.formbuilder-text:has(> input[multipletext="true"]) {
    position: relative;    
 }

 div.formbuilder-text input[multipletext="true"] {
    padding-left: 45px;
 }

/*************************** 
SWP Table
*****************************/
 .formbuilder-swpTable-label{
    

 }


/*************************** 
Rotating Banner
*****************************/

.rotating_banner{position:relative;}
.rotating_banner a{position:absolute;z-index:1; display:none;}
.rotating_banner a.active{z-index:3; display: inline;}
.col-banner{ width: 18%; flex: 0 0 auto;}
.col-banner-small{ width: 220px;flex: 0 0 auto;}
.col-banner-large{ width: calc(100% - 240px);flex: 0 0 auto;}

#bannerTopContainer {
    display: block;
    height: 100px;
    margin-bottom: 40px;
}

#bannerTopInsideContainer {
    display: none;    
}

#bannerLeftContainer img, #bannerRightContainer img{
    width: 200px; height: 300px;
}

@media screen and (max-width: 900px) {
    #bannerTopInsideContainer  img{width: 96%; height: auto;}
}

@media screen and (max-width: 500px) {
    #bannerTopContainer .bannerImg{width: 100%; height: auto;}
}

@media screen and (max-width: 600px) {
    .col-banner-small{ width: 120px;}
    .col-banner-large{ width: calc(100% - 140px);}

    #bannerLeftContainer img, #bannerRightContainer img{
        width: 100px; height: 150px;
    }
}

@media screen and (max-width: 767px) {
    .col-banner{ width: 40%; }
}


@media screen and (min-width: 768px) {
    #bannerTopContainer {
        display: none;
    }

    #bannerTopInsideContainer {
        display: block;
        height: 100px;
    }
}