/* 
light blue #99a1b5
dark blue #0e1a3b

Top bar #364260
*/

/* template headings */

/* .img-logo */ 
#contractor .img-logo {
	display: none;
}


/* .page-title */ 
#contractor .page-title,
#client .page-title {
	display: block;
	color: white;
}


#client .img-logo,
#contractor .img-logo {
	display: none;
}



.scroll {
    overflow: scroll;
}



/* special text classes */

.bold, b, strong {
    font-family: 'Metropolis Bold' !important;
    font-weight: 900 !important;
}

.regular {
    font-family: 'Metropolis Regular' !important;
    font-weight: 400 !important;    
}

.normal, td, div {
    font-size: 16px !important;
}

.larger {
    font-size: 18px !important;
}

.smaller {
    font-size: 14px !important;
}

.smallest {
    font-size: 12px !important;
}

.tiny {
    font-size: 10px !important;
}

.lh18 {
    line-height: 18px;
}

.lh16 {
    line-height: 16px;
}

.lh14 {
    line-height: 14px;
}


.lh12 {
    line-height: 12px;
}

/* buttons */
.bg-primary {
    background: #0e1a3b !important;
    color: #FFF;
}

.bg-secondary {
  background: #fff !important;
  color: #0e1a3b;
}

.bg-success {
  background: #34C759 !important;
  color: #FFF;
}

.bg-danger {
  background: #EC4433 !important;
  color: #FFF;
}

.bg-warning {
  background: #FE9500 !important;
  color: #FFF;
}

.bg-info {
  background: #592BCA !important;
  color: #FFF;
}

.bg-light {
  background: rgba(255, 255, 255, 0.5) !important;
}

.bg-dark {
  background: #222 !important;
  color: #FFF;
}

.darkblue {
    color: #0e1a3b !important;
}

.lightblue {
    color: #99a1b5 !important;
}

.grey {
    color: #c1c1c1 !important;
}

.green {
	color: green;
}

.red {
	color: red;
}

.hidden-content {
    display: none;
}

/* links and pointer */

.clickable:active,
.clickable:focus,
.active-link:active,
.active-link:focus {
    /*
    background: #c1c1c135 !important;
    */
    padding: 5px;
    border-radius: 5px;
    border: thin dashed #4d4d4da8 !important;
}

/* header section */
.top {
    vertical-align: top !important;
}
.header-logo {
	width: 100px;
}

.bor-b {
    border-bottom: thin solid #c1c1c1 !important;
}

.bottom-filler {
    width: 100%;
    float: left;
    height: 200px;
}


/* notification popup */
#ajax-notice .subtitle, #ajax-notice .text {
    color: #3a3a3a !important;
}


/* trix editor */
.trix-button--icon-link,
.trix-button--icon-heading-1,
.trix-button--icon-quote,
.trix-button--icon-code,
.trix-button--icon-attach,
.trix-button--icon-undo,
.trix-button--icon-redo,
.trix-button-group--history-tools,
.trix-button-group--file-tools {
    display: none !important;
}


#trix-toolbar-1,
#trix-toolbar-2,
#trix-toolbar-3,
#trix-toolbar-4,
#trix-toolbar-5,
#trix-toolbar-6,
#trix-toolbar-7 {
    height: 30px !important;
    margin-top: 6px;
}   

.trix-button--icon-decrease-nesting-level, 
.trix-button--icon-increase-nesting-level {
    display: none;
}

#trix-toolbar-1 {
    border-top: 2px solid #c1c1c1;
    border-left: 2px solid #c1c1c1;
    border-right: 2px solid #c1c1c1;
    border-radius: 5px 5px 0px 0px;
    padding: 9px 10px;
    height: 46px !important;
}
    
trix-editor {
    border: 2px solid #c1c1c1;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;        
}
    

/* bottom tabs menu */
.appBottomMenu {
    width: 100%;
}
.desktopmenu {
    width: 1100px;
}


.item.active {
    background: #e2e2e2;
}

.appBottomMenu .item .col {
    padding-top: 10px;  
}

/* general formatting */
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

h6 {
	width: 100%;
	float: left;
}


.extraHeader {
    max-width: 600px;
    margin: 0 auto;
}


#notification-get .subtitle, #notification-get .text {
    color: #3a3a3a !important;
}

.modal {
	z-index: 99999 !important;
}


.offcanvas-header.el {
    background: #364260 !important;
    color: #ffffff !important;
}

.blank {
    border: 0;
    background: none;
}

.blank i {
    color: white;
}
i.bi {
    transform: scale(0.91);
}
i.icon, i.bi {
    line-height: 1em !important;
}

.offcanvas-title {
    color: #ffffff;
}

/* for All mobile */
@media only screen and (max-width: 992px) { 
    
    #appCapsule {
        width: 100%;
        margin: 0 auto;
    }        
    
    #portalmenu a {
        width: 33%;
    }    
    
    .wide-block {
        padding-left:0;
        padding-right:0;
        margin: 16px 0;
    }
    
    .home-lhs {
        width: 20% !important;
        padding-top:14px !important;
    }
    
    .home-cen {
        width: 80% !important;
    }    
    
    .home-lhs i {
        font-size: 42px !important;
    }
    
    .home-row {
        padding-top:8px;
    }
    
    .ib-lhs {
        padding-top: 12px !important;
        padding-left:0 !important;
    }

    .ib-lhs i {
        font-size: 30px !important;
    }    
    
    .info-lower {
        font-size:14px !important
    }
    
    .offcanvas-body, .action-button-list, .offcanvas-header.el {
        width: 100% !important;
    }    

	/* old paddings/margins */
	.m-lr-0-d {
	    margin-left: 0 !important;
	    margin-right: 0 !important;
	}

	.m-r-0-d {
	    margin-right: 0 !important;
	}

	.m-l-0-d  {
	    margin-left: 0 !important;
	}

	.m-r-1-d {
	    margin-right: 10 !important;
	}

	.m-l-1-d  {
	    margin-left: 10 !important;
	}    

	.m-r-32-d {
	    margin-right: 32px !important;
	}

	.m-l-32-d  {
	    margin-left: 32px !important;
	}

	.m-t-12-d {
	    margin-top: 120px !important;
	}

	.m-t-2-d {
	    margin-top: 20px !important;
	}      

	.m-t-4-d {
	    margin-top: 40px !important;
	}       

	.m-t-6-d {
	    margin-top: 60px !important;
	}   

	.m-t-8-d {
	    margin-top: 80px !important;
	}       

	.m-t--12-d {
	    margin-top: -120px !important;
	}

	.m-t--6-d {
	    margin-top: -60px !important;
	}    

    .dv {
        display: none !important;
    }
    

}



/* for all tops */
@media only screen and (min-width: 993px) { 
    
    #appCapsule {
        width: 1100px;
        margin: 0 auto;
    }    
    
    #portalmenu a {
        width: 25%;
    }   
    
    .wide-block {
        padding-left: 16px;
        padding-right: 16px;
        margin:16px;
    }

	/* old paddings/margins */
	.p-lr-40-d {
    	padding: 0 40px !important;
	}

	.p-lr-0-d {
	    padding-left: 0 !important;
	    padding-right: 0 !important;
	}

	.p-r-0-d {
	    padding-right: 0 !important;
	}

	.p-l-0-d {
	    padding-left: 0 !important;
	}

	.p-r-32-d {
	    padding-right: 32px !important;
	}

	.p-r-34-d {
	    padding-right: 34px !important;
	}    

	.p-l-32-d {
	    padding-left: 32px !important;
	} 

	.p-r-4-d {
	    padding-right: 41px !important;
	}        

	.p-r-5-d {
	    padding-right: 50px !important;
	}    

	.p-r-64-d {
	    padding-right: 64px !important;
	}

	.p-l-64-d {
	    padding-left: 64px !important;
	}    

	.p-r-16-d {
	    padding-right: 16px !important;
	}

	.p-l-16-d {
	    padding-left: 16px !important;
	}   

    .mv {
        display: none !important;
    }

    .section {
		margin-left: auto;
		margin-right: auto;
		width: 1100px; 
		height: 100vh;   
		border: none; 	
    }
    
}

/* general stuff */

.line-below {
	border-bottom: thin solid #c1c1c1;
}

.line-above{
	border-top: thin solid #c1c1c1;
}

.line-break {
	width: 100%;
	border-top: thin solid #c1c1c1;
	float: left;
	height: 2px;
}

.bottom-100 {
	width: 100%;
	float: left;
	height: 100px;
}

.bottom-200 {
	width: 100%;
	float: left;
	height: 200px;
}

.bottom-400 {
	width: 100%;
	float: left;
	height: 400px;
}


.w-100 {
	width: 100%;
}

.f-l {
	float: left;
}

.f-r {
	float: right;
}

.info-container {
	width: 100%;
	float: left;
	padding: 20px 0;
}

.display-none {
	display: none;
}

.section {
	background: #ffffff;
}


.hide {
    display: none !important;
}


.clickable {
    cursor: pointer !important;
}

.small {
    font-size: 10px;
    font-face: normal;
}

.caps {
  text-transform: uppercase !important;
}


.color-white {
  color: white !important;
}

.color-green {
  color: green !important;
}

.color-red {
  color: red !important;
}


.backgroundblack {
  background: black !important;
}

.zero-padding {
  padding:  0 0px !important;
}


.paddingtop20 {
  padding-top: 20px;
}

.padding-left-right-zero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.position-relative {
  position: relative !important;
}

.colorred {
  color: red;
}

.ciqu-blue {
  background: #364260 !important;
}

.fontwhite {
  color: white !important;
}

.black {
  color: black;
}

.color-main {
  color: #364260 !important
}

.opacity-five {
    opacity: .5;
}

.opacity-three {
    opacity: .3;
}

.form-option-select {
	width: 100%; 
	background: #ffffff; 
	position: absolute; 
	z-index: 999;
	padding-top: 10px;
}

.h-10 {
	height: 10px;
	width: 100%;
	float: left;
}

.h-20 {
	height: 20px;
	width: 100%;
	float: left;
}

.h-30 {
	height: 20px;
	width: 100%;
	float: left;
}

.h-40 {
	height: 40px;
	width: 400%;
	float: left;
}

.h-50 {
	height: 40px;
	width: 400%;
	float: left;
}

.h-60 {
	height: 40px;
	width: 400%;
	float: left;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}


.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.width-100 {
	width: 100%;
}



/* forms */
.form-label {
	margin-bottom: 8px !important;
	font-size: 12px;
}

.response-container {
	text-align: center;
}

.response-container i {
	font-size: 80px;
}

/* margin bottom */
.mb-0 {
	margin-bottom: 0px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.mb-4 {
    margin-bottom: 40px !important;
}

.mb-6 {
    margin-bottom: 60px !important;
}

.mb-8 {
    margin-bottom: 80px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mb-120 {
    margin-bottom: 120px !important;
}

.mb-140 {
    margin-bottom: 140px !important;
}

.mb-160 {
    margin-bottom: 160px !important;
}

.mb-170 {
    margin-bottom: 170px !important;
}

.mb-08 {
	margin-bottom: 8px !important;
}


/* margin top */
.mt-2 {
    margin-top: 20px !important;
}

.mt-4 {
    margin-top: 40px !important;
}   

.mt-6 {
    margin-top: 60px !important;
}   

.mt-8 {
    margin-top: 80px !important;
}   

.mt-10 {
    margin-top: 100px !important;
}

.mt-12 {
    margin-top: 120px !important;
}

.mt-14 {
    margin-top: 140px !important;
}

.mt-16 {
    margin-top: 160px !important;
}

.mt-17 {
    margin-top: 170px !important;
}


/* margin left */
.ml-2 {
    margin-left: 20px !important;
}

.ml-4 {
    margin-left: 40px !important;
}

.ml-6 {
    margin-left: 60px !important;
}

.ml-8 {
    margin-left: 80px !important;
}

.ml-10 {
    margin-left: 100px !important;
}



/* margin right */
.mr-2 {
    margin-right: 20px !important;
}

.mr-4 {
    margin-right: 40px !important;
}

.mr-6 {
    margin-right: 60px !important;
}

.mr-8 {
    margin-right: 80px !important;
}

.mr-10 {
    margin-right: 100px !important;
}

.m-0 {
	margin: 0;
}


/* padding bottom */
.pb-2 {
    padding-bottom: 20px !important;
}

.pb-4 {
    padding-bottom: 40px !important;
}

.pb-6 {
    padding-bottom: 60px !important;
}

.pb-8 {
    padding-bottom: 80px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.pb-120 {
    padding-bottom: 120px !important;
}

.pb-140 {
    padding-bottom: 140px !important;
}

.pb-160 {
    padding-bottom: 160px !important;
}

.pb-170 {
    padding-bottom: 170px !important;
}


/* padding top */
.pt-2 {
    padding-top: 20px !important;
}

.pt-4 {
    padding-top: 40px !important;
}   

.pt-6 {
    padding-top: 60px !important;
}   

.pt-8 {
    padding-top: 80px !important;
}   

.pt-10 {
    padding-top: 100px !important;
}

.pt-12 {
    padding-top: 120px !important;
}

.pt-14 {
    padding-top: 140px !important;
}

.pt-16 {
    padding-top: 160px !important;
}

.pt-17 {
    padding-top: 170px !important;
}


/* padding left */
.pl-16 {
    padding-left: 16px !important;
}

.pl-2 {
    padding-left: 20px !important;
}

.pl-32 {
    padding-left: 32px !important;
}

.pl-4 {
    padding-left: 40px !important;
}

.pl-6 {
    padding-left: 60px !important;
}

.pl-8 {
    padding-left: 80px !important;
}

.pl-10 {
    padding-left: 100px !important;
}



/* padding right */
.pr-16 {
    padding-right: 16px !important;
}

.pr-2 {
    padding-right: 20px !important;
}

.pr-32 {
    padding-right: 32px !important;
}

.pr-4 {
    padding-right: 40px !important;
}

.pr-6 {
    padding-right: 60px !important;
}

.pr-8 {
    padding-right: 80px !important;
}

.pr-10 {
    padding-right: 100px !important;
}

.fs-18 {
    font-size:18px;
}


.fs-20 {
    font-size:20px;
}

.fs-22 {
    font-size:22px;
}

.fs-24 {
    font-size:24px;
}

.fs-26 {
    font-size:26px;
}

.fs-28 {
    font-size:28px;
}

.fs-30 {
    font-size:30px;
}

/* Case */
.w-c, .c-c {
    text-transform: capitalize !important;
}

.l-c {
    text-transform: lowercase !important;
}

.u-c {
    text-transform: uppercase !important;
}

/* checkbox overwrite */

input[type=checkbox] {
   -webkit-appearance: none;
   display: inline-block;
   width: 20px;
   height: 20px;
   background-color: white;
   border-radius: 4px;
   border: 2px solid #0e1a3b;
   margin-right: 10px;
}
input[type=checkbox]:checked {
   background-color: #0e1a3b;
   border: 2px solid #0e1a3b;
   padding: 3px;
   content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
}

/* header of app */

.appHeader i {
	font-size: 26px;
}



/* Tooltip container */
.tooltip {
  position: relative;
  opacity: 1 !important;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  line-height: 16px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* message box */

.message-box {
	margin: 0 auto;
	width: 300px;
	text-align: center;
}

.message-box i {
	font-size: 90px;
}



.searchbox .form-control  {
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid #E1E1E1 !important;
    padding: 0 16px 0 36px;
    font-size: 15px;
    box-shadow: none !important;
    color: #141515;
}

.ms-1.close.toggle-searchbox {
    width: 24px; 
    height: 44px;
}

.searchbox .input-icon {
    top: 4px;
}


/* portal ############################## */
/* Home page contractor portal */

/* buttons */
.btn-row {
    width: 100%;
    float: left;
    height: 80px;  
}

.btn-sec {
    width: 33%;
    float: left;
    height: 80px; 
    padding: 0 20px;
}

.btn-blank {
    border: 2px solid #0e1a3b !important;
}

.btn-block i {
    font-size: 24px;
}

.btn, .btn:focus, .btn:active {
    border-radius: 24px !important;
    padding: 3px 18px !important;
    
}

.home-row {
    width: 100%;
    float: left;
    height: 100px;
}

.home-lhs {
    width: 10%;
    float: left;
    height: 80px;
    padding-top: 10px;
}

.home-lhs i {
    font-size: 46px;
}

.home-cen {
    width: 70%;
    float: left;
    height: 80px;
    
}

.home-rhs {
    width: 20%;
    float: left;
    height: 80px;
}

.hom-tbl tr td {
    padding: 0 0;
}

/* contractor tabs */


.drw-row {
    width: 100%;
    float: left;
    height: 70px;
    
}

.drw-lhs {
    width: 5%;
    float: left;
    height: 70px;
    padding-top: 13px;
}

.drw-cen {
    width: 75%;
    float: left;
    height: 70px;
    padding-top: 13px;
}

.drw-rha {
    width: 10%;
    float: left;
    height: 70px;
    padding-top: 8px;
}

.drw-rhb {
    width: 10%;
    float: right;
    height: 70px;
    padding-top: 13px;
    text-align: right;
}

.drw-row i {
    font-size: 24px;
}

/* info tab */
.info-row {
    width: 100%;
    float: left;
    display: flex;
}

.info-lhs {
    width: 55%;
    float: left;
    padding: 20px;
}

.info-rhs {
    width: 45%;
    float: left;
    padding: 20px;    
}

.info-block {
    width: 100%;
    background: #e2e2e2;
    text-align: left;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.ib-lhs {
    width: 17%;
    float: left;
    height: 80px;
    padding-top: 7px;
    padding-left:5px;
}

.ib-lhs i {
    font-size: 47px;
}

.lb-cen {
    width: 86%;
    float: left;
    height: 80px;
    padding: 5px;
}

.info-tbl {
    width: 100%; 
    margin-bottom: 20px;
}

table.info-tbl tr td {
    vertical-align: top;
    padding-bottom: 5px;
    line-height: 22px;
}

.contac {
    margin: 20px 0;
    line-height: 20px
}

.tab-pane h1 {
    margin-bottom: 20px;
}

.hist-row {
    float: left;
    min-height: 50px;
    width: 100%;
    margin-bottom: 10px;
}

.hist-lha {
    float: left;
    min-height: 50px;
    width: 5%;
}

.hist-lha i {
    font-size: 30px;
}

.hist-lhb {
    float: left;
    min-height: 50px;
    width: 18%;
    padding: 0 15px;
}

.hist-lhc {
    float: left;
    min-height: 50px;
    width: 20%;
    padding: 0 15px;
}

.hist-cen {
    float: left;
    min-height: 50px;
    width: 37%;
    padding: 0 15px;
}

.hist-cen div {
    margin-bottom: 17px
}

.hist-rhs {
    float: left;
    min-height: 50px;
    width: 20%;
    padding: 0 15px;
}

.s-thumb {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-size: 30px 30px;
    background-image: url('https://docs.ciquconstruction.com/assets/img/favicon/android-icon-96x96.png');
    background-repeat: no-repeat;
}

.document-iframe {
    width: 100%; 
    margin-bottom: 20px;
    border-radius: 5px !important;
}

.dummy-iframe {
    display: block;
    padding: 1px 0;
    background: #fff;
    border: 2px dashed #c2cdda;
    border-radius: 5px;
    text-align: center;
    margin: 0px 0; 
    width: 100%;
}

/** COLUMN IMAGE GALLERY **/

.imgrow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  margin-top:20px;
}

/* Create four equal columns that sits next to each other */
.imgcolumn {
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.imgcolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .imgcolumn {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .imgcolumn {
    flex: 100%;
    max-width: 100%;
  }
}