/* ==========================================================================
     Project:     Sunoco LP
     Date:        06/03/2022 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Typography
========================================================================== */

body {font-family: greycliff-cf, sans-serif; font-size: .875rem}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: greycliff-cf; line-height:1.25;font-weight:900; color: #0A1658; margin-bottom: 1.25rem}


/* ==========================================================================
     Main Layout
========================================================================== */ 
body {min-width: 330px;}
.page-wrapper .row {margin-right: 0 !important; margin-left: 0 !important;}
.page-wrapper {background: #fff; scroll-behavior: smooth;}
.lead-gen-file-share-container {max-width: 1200px; margin: auto;}
.lead-gen-file-share-upload-container {max-width: 1200px; margin: auto;}
.wrapper-sign-in {height: 100vh;min-width: 260px;}

/* Links */
.page-wrapper button:focus {box-shadow:none}

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

/* ==========================================================================
     Sections
========================================================================== */ 

/* Header */
header {position: relative; background: #0a1658;}
     header .container-fluid {position:relative;}


/* ==========================================================================
     CMS Classes & Components
========================================================================== */

/* Text */
.page-wrapper .text-gray {color: #707070}
.page-wrapper .text-white {color: #fff}
.page-wrapper .text-dark-blue {color: #0a1658}
.page-wrapper .text-small {font-size: 1rem}
.page-wrapper .text-extra-small {font-size: 0.9rem}
.page-wrapper .font-weight-bold {font-weight: 700}

/* Button */
.page-wrapper .primary-button {font-family: greycliff-cf, sans-serif; width: 100%; height: 56px; color: #ffffff; background-color: #0A1658; font-size: 1.7rem; font-weight: 400; border-color: unset; border-style: none; text-decoration: none;}
.page-wrapper .btn-log-out {font-family: sans-serif; height: 100%; line-height: 45px; color: #0A1658; background-color: #74CDD7; font-size: 1.1rem; font-weight: 700; border-color: unset; border-style: none; text-decoration: none;}


/* ==========================================================================
    COMPONENTS
========================================================================== */

/*Sign-in*/ 
.container-sign-in {display: flex; position: relative; background: url(/img/sunoco-fuel-truck.jpg) center center no-repeat; background-size:cover;}
.container-sign-in::before {z-index: 0;content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; opacity: .8;}
.csi__form {z-index: 1; width: 360px;}

/* Primary Content */
.page-wrapper main .directory-mgr-file-share {max-width: unset;}
.page-wrapper main .directory-mgr-file-share-upload {max-width: unset;}
.pc__title {border-left: 6px solid #FD000E;}

/* Upload Table List */
.file-share-datatable .btn-disabled {cursor: default;}

/* ==========================================================================
     MEDIA QUERIES
========================================================================== */

/* Min Width */
@media (min-width: 0px) {	
     /* Type */
     h1, .h1 {font-size: 3.25rem}
     h2, .h2 {font-size: 2.5rem}
     h3, .h3 {font-size: 1.375rem}
     h4, .h4 {font-size: 1.25rem}
     h5, .h5 {font-size: 1.125rem}
     h6, .h6 {font-size: 1rem}
     p {font-size: 1rem; line-height: 1.4;}

     /* Header */
     header {height: 95px}
     #header-signin {height: 137px;}
     header .logo img {height: 80%;width:100%; max-width: 216px;}
     .page-wrapper .container-fluid {padding-left: 23px; padding-right: 23px;}

     /*Main container*/
     .wrapper-sign-in main {height: 100%;}
     .page-wrapper .btn-log-out {color: #74CDD7; background-color: #0a1658;height: 80%;}
     .page-wrapper .btn-log-out .log-out-icon {font-size: 2rem;}

     /*Form container*/
     .csi__form-container {min-height: 520px; background-position: right center;}
     .csi__form input {height: 56px;}
}

@media (min-width: 768px) {	
     /* Type */
     h1, .h1 {font-size: 3.25rem}
     h2, .h2 {font-size: 2.5rem}
     h3, .h3 {font-size: 1.25rem}
     h4, .h4 {font-size: 1.125rem}
     h5, .h5 {font-size: 1rem}
     h6, .h6 {font-size: .875rem}
     p {font-size: 1.25rem;  line-height: 1.8;}

     /* Header */
     header {height: 45px}
     #header-signin{height: 100%; max-width: 33.3%; min-height: 520px;}
     header .logo img {height: 100%; max-width: 184px;}
     #header-signin .logo img {width: 100%; max-width: 100%;}
     .page-wrapper .container-fluid {padding-left: 55px; padding-right: 55px;}

     /*Main container*/
     .page-wrapper .btn-log-out {color: #0A1658; background-color: #74CDD7; height: 100%;}
     .page-wrapper .btn-log-out .log-out-icon {font-size: 1.5rem;}
}


/*Data table file share upload*/
@media screen and (max-width: 767px){
     .page-wrapper .directory-mgr-file-share div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child {padding-left: 15px;}
     .page-wrapper .directory-mgr-file-share div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {text-align: left; }
}