/* here you can put your own css to customize and override the theme */


.bodyBackground::before {
    background-image: url("/assets/img/PUKKA_LOGO_WHITE.svg");
    background-repeat: no-repeat;
    background-position: center center;
    opacity: .2;
}

.login .content { min-height: 300px; }

.no-underline a:hover { text-decoration: none !Important; } 

ul.NoIconsList {
    list-style-type: none;
    padding: 0;
}

.panel-heading { min-height: 38px; }

.padded-table td { padding-top: 5px; }
 
 #toast-container { margin-top: 40px !important; }

 /*.tableCellShowRedBg td { background-color: #FAEAE6 !important; text-decoration: line-through; }*/
  .tableCellShowRedBg td { color: #DCDCDC !important; text-decoration: line-through; }
  .tableCellShowRedBg td div { opacity: 0.2; }

.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-left: 0px !Important;    
}
.form-group label { margin-left: 4px !Important; margin-right: 12px !Important; object-fit: cover; }

.page-breadcrumb .form-control { height: 37px !important; }
.dropdown-toggle { text-align: left; }

/*svg {
    position: absolute;
    top: 0;
    left: 0;
}*/ 



.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}



.gmaps { height: 600px; }
.gmapsAccountScreen { height: 290px; }


.breadcrumbMenu .page-breadcrumb.breadcrumb {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    padding-right: 30px;
    padding-left: 8px;
    margin-top: 15px;
    margin-bottom: 25px;
    border: 0px !important;
    background-color: #eee;
}
.breadcrumbMenu .page-breadcrumb.breadcrumb > li > i {
    color: #666;
}
.breadcrumbMenu .page-breadcrumb.breadcrumb > li > a, .breadcrumbMenu .page-breadcrumb.breadcrumb > li > i, .breadcrumbMenu .page-breadcrumb.breadcrumb > li > span {
    color: #333;
    font-size: 14px;
    text-shadow: none;
}
.breadcrumbMenu li [class^="fa-"], .breadcrumbMenu li [class*=" fa-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
.breadcrumbMenu .page-breadcrumb.breadcrumb > li > a, .breadcrumbMenu .page-breadcrumb.breadcrumb > li > i, .breadcrumbMenu .page-breadcrumb.breadcrumb > li > span {
    color: #333;
    font-size: 14px;
    text-shadow: none;
}
.breadcrumbMenu .row:before, .breadcrumbMenu .row:after, .breadcrumbMenu .breadcrumb > li+li:before {
    content: " ";
    display: table;
}
.breadcrumbMenu .page-breadcrumb.breadcrumb .btn-group {
    right: 15px;
    position: absolute;
    margin-top: -8px;
}



/*RadComboBox shit */
.RadComboBox select { border: 0px !Important; }
.RadComboBoxDropDown .rcbScroll { max-height: 300px !Important; }

.bigIcons .rcbImage { width: 70px !Important; }
/*.smallIcons .rcbImage { width: 50px !Important; }*/
.smallIcons .rcbImage { width: 40px !Important; height: 32px !Important; overflow: hidden; }

.multipleRowsColumns .rcbItem,
.multipleRowsColumns .rcbHovered
{
    float:left;
    margin:0 1px;
    min-height:13px;
    overflow:hidden;
    padding:2px 19px 2px 6px;
    /*width:140px !Important;*/
    
    font-size: 7pt !Important;
    text-align: center !Important;
    line-height: 7pt !Important;
    height: 95px !Important;
    
    width:90px !Important;
} 


div.RadComboBoxDropDown_MetroTouch .rcbSeparator
{
    background: none;
    font-family: Arial;
    font-weight: bold;
    font-size: 10pt;
    padding-left: 6px !important;
    color: #ff6b00;
}
div.RadComboBoxDropDown_MetroTouch .rcbItem, div.RadComboBoxDropDown_MetroTouch .rcbHovered
{
    padding-left: 20px;
    font-family: Arial;
    font-size: 10pt;
}

div.RadComboBoxDropDown_MetroTouch em
{
    font-style: normal;
    font-weight: bold;
}
div.RadComboBoxDropDown_MetroTouch .rcbItem em
{
    background: Yellow;
}

.RadComboBox_MetroTouch .rcbFocused .rcbReadOnly .rcbInputCell {
    border-color: #ff6b00 !Important;
    color: white;
    background-color: #ff6b00 !Important;
}
.RadComboBox_MetroTouch .rcbFocused .rcbArrowCell {
    border-color: #ff6b00 !Important;
    color: white;
    background-color: #ff6b00 !Important;
}


div.radChart svg { margin: 0 auto; }



/* this is for the order products product details page */
.thumbnail { min-width: 219px; }

@media (min-width: 1400px) and (max-width: 2100px)  
{ 
    .artworkFiles .col-md-4 { width: 25%; }
    .orderProducts .col-md-4 { width: 33.333%; }
}
@media (min-width: 992px) and (max-width: 1399px)  
{  
    .orderProducts .col-md-4 { width: 50%; }  
    
}



#colorPanelDiv .thumbnail,
#closurePanelDiv .thumbnail { min-width: 120px; max-width: 120px; min-height: 121px; max-height: 121px; text-align: center; }
/*#colorPanelDiv .thumbnail { min-width: 120px; max-width: 120px; text-align: center; }*/


.colorwayGrid {
    width: 100%;
    
}

/* scaling the shit */

@media (max-width: 1590px)
{   

    /*.multipleRowsColumns .rcbItem,
    .multipleRowsColumns .rcbHovered
    {
        width:90px !Important;
    } 
    .bigIcons .rcbImage { width: 70px !Important; }*/
    
}


@media (min-width: 1550px)
{     
    #colorItemDiv .col-md-4 { width: 33.33333333%; }  
    
    /*.multipleRowsColumns .rcbItem,
    .multipleRowsColumns .rcbHovered
    {
        float:left;
        margin:0 1px;
        min-height:13px;
        overflow:hidden;
        padding:2px 19px 2px 6px;
        width:49.8%;
        width:90px !Important;
    }
    .bigIcons .rcbImage { width: 70px !Important; }*/
        
}
@media (min-width: 1175px) and (max-width: 1549px)   
{     
    
    #colorItemDiv div:nth-child(2):after { 
     content: "\A";
     white-space: pre; 
    }
    #colorItemDiv .col-md-4 { width: 50%; }  
    
    #graphicsDiv div:nth-child(2):after { 
     content: "\A";
     white-space: pre; 
    }
    #graphicsDiv .col-md-4 { width: 50%; }  
    
    #jacquardPanelsDiv div:nth-child(2):after { 
     content: "\A";
     white-space: pre; 
    }
    #jacquardPanelsDiv .col-md-4 { width: 50%; }  
       
}
@media (min-width: 992px) and (max-width: 1174px)  
{     
    
    #colorItemDiv div:nth-child(1):after { 
     content: "\A";
     white-space: pre; 
    }
    #colorItemDiv .col-md-4 { width: 90%; }  
    
    #graphicsDiv div:nth-child(1):after { 
     content: "\A";
     white-space: pre; 
    }
    #graphicsDiv .col-md-4 { width: 90%; }  
    
    #jacquardPanelsDiv div:nth-child(1):after { 
     content: "\A";
     white-space: pre; 
    }
    #jacquardPanelsDiv .col-md-4 { width: 90%; }  
}



@media (min-width: 1500px)
{   
    /*#tab_graphics .col-md-4 { width: 35%; }*/
    #tab_graphics .thumbnail { width: 35%; }
}

@media (min-width: 1460px)
{     
    #tab_addons .col-md-6 textarea { width: 150px !Important; }  
    
    /*#tab_graphics .col-md-4 { width: 33%; }   */
    #tab_graphics .thumbnail { width: 33%; }
}
@media (min-width: 1415px) and (max-width: 1460px)  
{     
    #tab_addons .col-md-6 textarea { width: 130px !Important; }  
    
    #tab_graphics .col-md-4 { width: 33%; }
    #tab_graphics .thumbnail { width: 33%; }
}
@media (min-width: 1300px) and (max-width: 1414px)  
{
    #tab_addons .col-md-6 input[type="image" i] { width: 90px !important; height: 70px !Important; }        
    #tab_addons .col-md-6 textarea { width: 110px !Important; }  
       
    #tab_graphics .col-md-4 { width: 45%; }
    #tab_graphics .thumbnail { width: 45%; }
}
@media (min-width: 1200px) and (max-width: 1299px)  
{
    #tab_addons .col-md-6 input[type="image" i] { width: 90px !important; height: 70px !Important; }      
    #tab_addons .col-md-6 textarea { width: 100px !Important; }  
    
    #tab_graphics .col-md-4 { width: 45%; }
    #tab_graphics .thumbnail { width: 45%; }   
}
@media (min-width: 1025px) and (max-width: 1199px)  
{
    #tab_addons .col-md-6 input[type="image" i] { width: 80px !important; height: 60px !Important; }       
    #tab_addons .col-md-6 textarea { width: 85px !Important; }  
    
    #tab_graphics .col-md-4 { width: 100%; }
    #tab_graphics .thumbnail { width: 100%; }   
}
@media (min-width:992px) and (max-width: 1024px)  
{
    #tab_addons .col-md-6 input[type="image" i] { width: 80px !important; height: 60px !Important; } 
    #tab_addons .col-md-6 { width: 30%; }        
    #tab_addons .col-md-6 textarea { width: 75px !Important; }  
    
    #tab_graphics .col-md-4 { width: 100%; }
    #tab_graphics .thumbnail { width: 100%; }   
}




/*@media (min-width:1307px)  
{
    .col-md-8 { width: 55%; }        
    
    
    
}

@media (min-width: 1200px) and (max-width: 1307px)   
{
     .col-md-8 { width: 55% !Important; }   
    
}*/






/* for colorways list */

.colorwayScroll 
{
    overflow: scroll; 
    /*max-height: 100px;   */
}

@media (min-height: 300px) and (max-height: 499px)
{   
    .colorwayScroll {
        max-height: 60px;   
    }
    /*#TitlePlaceholder_lblProductName { color: red !Important; }*/
    #svg2 { transform: scale(0.35); position: relative; top: -135px; }
    #divCanvas { transform: scale(0.35); position: relative; top: -135px; }
    #hatdrawing { max-height: 240px; }
    #divHatViewButtons { position: relative; top: -255px; }
    .fixedElement { max-width: 400px !Important; }
}
@media (min-height: 500px) and (max-height: 639px)
{   
    .colorwayScroll {
        max-height: 80px;   
    }
    /*#TitlePlaceholder_lblProductName { color: blue !Important; }*/
    #svg2 { transform: scale(0.55); position: relative; top: -95px; }
    #divCanvas { transform: scale(0.55); position: relative; top: -95px; }
    #hatdrawing { max-height: 300px; }
    #divHatViewButtons { position: relative; top: -175px; }
    .fixedElement { max-width: 450px !Important; }

    #divSVG { max-height: 340px; overflow: hidden; clear: both; }
}
@media (min-height: 640px) and (max-height: 779px)
{   
    .colorwayScroll {
        max-height: 100px;   
    }
    /*#TitlePlaceholder_lblProductName { color: green !Important; }*/
    #svg2 { transform: scale(0.55); position: relative; top: -95px; }
    #divCanvas { transform: scale(0.55); position: relative; top: -95px; }
    #hatdrawing { max-height: 360px; }
    #divHatViewButtons { position: relative; top: -175px; }
    .fixedElement { max-width: 500px; }

    #divSVG { max-height: 390px; overflow: hidden; clear: both; }

    /*#divCanvas { height: 325px !Important; }*/

    /*#svg2 { width: 400px !important; height: 325px !Important; }
    #divCanvas { width: 400px !important; height: 325px !Important; }
    #canvas2 { width: 1700px !important; height: 1400px !Important; }*/
}
@media (min-height: 780px) and (max-height: 859px)
{   
    .colorwayScroll {
        max-height: 200px;   
    }
    /*#TitlePlaceholder_lblProductName { color: orangered !Important; }*/
    .fixedElement { max-width: 500px; }
}
@media (min-height: 860px)
{   
    .colorwayScroll {
        max-height: 300px;   
    }
    /*#TitlePlaceholder_lblProductName { color: mediumpurple !Important; }*/
    .fixedElement { max-width: 500px; }
}

/*.canvas-container { margin: auto !Important; }
#canvas2 { margin: auto !Important; }*/
/*.fixedElement { max-width: 522px; }*/



/* for order confirmations */
.orderConfirmationDiv {
    position: absolute;
    left: 50%;
    /*top: 50%;*/
          
    width:1000px;
    margin-left: -500px;
    /*height:265px;
     half width*
    margin-top: -132px; /*half height*/
    padding: 20px;
}
.orderConfirmationDiv h1 { font-size: 30px !Important; }
.orderConfirmation .col-md-4 { width: 33.333%; }


/* for account credit application (for accounting to print it) */
.creditApplicationDiv {
    position: absolute;
    left: 50%;
    /*top: 50%;*/
          
    width:1000px;
    margin-left: -500px;
    /*height:265px;
     half width*
    margin-top: -132px; /*half height*/
    padding: 20px;
}
.creditApplicationDiv h1 { font-size: 30px !Important; }
/*.creditApplicationDiv .formHeader { margin-bottom: 10px; }*/
.creditApplicationDiv .col-md-4 { width: 33.333%; }



.holiday-xmas {
	background-image: url(/assets/img/clipart1161730.png);
	background-repeat: repeat-x;
	background-size: auto 20px;
	height: 40px;
	width: auto;
	margin-top: -26px;
}



.AvatarImage {
    width: 29px;
    height: 29px;
    border-radius: 15% !Important;
}


.bioFolder {
    background-image: url(/assets/img/profile/FolderBG.png);
	background-repeat: repeat-x;
	height: 656px;
	width: auto;
}


.meet-our-team { min-height: 460px !Important; }
.team-info { min-height: 105px; }

.img-responsive-scale-div {
    width:auto; 
    text-align:center;
}
.img-responsive-scale {
    width: 100%; 
    height: 100%; 
    object-fit: none; 
}



.ui-spinner {position: relative; border: 0px solid white; }
.ui-spinner-buttons {position: absolute; background-color: #e5e5e5;}
.ui-spinner-button {overflow: hidden; cursor: pointer;}


/*.ui-spinner-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid #000;
  
  margin-bottom: 5px; 
}

.ui-spinner-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 5px solid #000;
}*/





/* THIS IS FOR THE CUSTOMIZER AND QUICK PICK */
.hat-selector {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}
.hat-selector .title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  background: #ebebeb;
  display: inline-block;
  margin: 0 auto 30px auto;
  padding: 15px 30px;
}

.hat-type {
  border: 1px solid #959595;
  border-radius: 10px !Important;
  /*padding: 30px 30px 70px 30px;*/
  /*height: 100%;*/
  height: 480px;
  position: relative;
}

.hat-type:hover {
  border: 1px solid #ec6d11;
}
.hat-type h2 {
  text-transform: uppercase;
  font-size: 26px;
  margin: 20px auto 20px auto;
  clear: both;
  position: relative;
}
.hat-type p {
  font-size: 16px;
  padding: 20px;
  line-height: 28px;
}
.hat-type:hover h2 {
  color: #ec6d11;
}
.hat-type h2:before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  width: 85%;
  height: 1px;
  background: #959595;
}
.hat-type:hover h2:before {
  background: #ec6d11;
}
.hat-type:hover h2:after {
  background: #ec6d11;
}
.hat-type h2:after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 85%;
  height: 1px;
  background: #959595;
}
.hat-type .button-customize-container {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  text-align: center;
}
.hat-type a.button-customize {
  background: #494949;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  display: inline-block;
  font-size: 12px;
}
.hat-type a:hover {
  text-decoration: none;
}
.hat-type a .button-text {
  padding: 8px 10px;
  background: #494949;
  float: left;
}
.hat-type a:hover .button-text {
  background: #ec6d11;
}
.hat-type a .button-arrow {
  background: #ec6d11;
  padding: 8px 15px;
  float: left;
}
.hat-type a:hover .button-arrow {
  background: #494949;
}

.hat-type-selections {
  border: 1px solid #959595;
  border-radius: 10px;
  padding: 30px 30px 70px 30px;
  height: 100%;
  height: 300px;
  position: relative;
}
.hat-type-selections:hover {
  border: 1px solid #ec6d11;
}
.hat-type-selections h2 {
  text-transform: uppercase;
  margin: 10px auto 20px auto;
  clear: both;
  position: relative;
  font-size: 23px;
}
.hat-type-selections p {
  font-size: 11px;
  /*text-align: left;*/
  color: #000000;
  font-weight: 500;
  margin-top: 20px;
  line-height: 22px;
}
.hat-type-selections .smallFont {
  font-size: 10px;
  line-height: 10px;
  color: #898989;
}
.hat-type-selections:hover h2 {
  color: #ec6d11;
}

.button-customize-container {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
}

.button-customize-container-selections {
  position: absolute;
  /*bottom: 25px;*/
  left: 0;
  right: 0;
  text-align: center;
}
a.button-customize-selections {
  background: #494949;
  color: #fff !important;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}
a .button-text-selections {
  padding: 8px 10px;
  background: #494949;
  float: left;
}
a:hover .button-text-selections {
  background: #ec6d11;
}
a .button-arrow-selections {
  background: #ec6d11;
  padding: 8px 15px;
  float: left;
}
a:hover .button-arrow-selections {
  background: #494949;
}

div.golfPanelBG {
  width: 100%;
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/golfPanelSelection.png');
  /*background-size: 100% 100%;*/
  border-top-left-radius: 10px !Important;
  border-top-right-radius: 10px !Important;
}
div.teamPanelBG {
  width: 100%;
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/teamPanelSelection.png');
  border-top-left-radius: 10px !Important;
  border-top-right-radius: 10px !Important;
}
div.lifestylePanelBG {
  width: 100%;
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/lifestylePanelSelection.png');
  border-top-left-radius: 10px !Important;
  border-top-right-radius: 10px !Important;
}
div.customPanelBG {
  width: 100%;
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/img/customPanelSelection.png');
  border-top-left-radius: 10px !Important;
  border-top-right-radius: 10px !Important;
}



@media (max-width: 992px) {
  .tagline {
    font-size: 21px;
    margin-top: 11px;
  }
  .hat-type h2 {
    font-size: 28px;
  }
  .hat-type a .button-text {
    padding: 11px 10px;
    font-size: 8px;
  }
}
@media (max-width: 768px) {
  header .col-md-3 {
    text-align: center;
  }
  header ul.social {
    float: none;
    margin-top: 15px;
  }
  .row-eq-height .col-md-4 {
    margin-bottom: 30px;
  }
  footer .first,
  footer .second,
  footer .third {
    text-align: center;
  }
  footer .third p {
    float: none;
  }
  footer ul.social {
    margin-left: 0;
    margin-bottom: 8px;
    float: none;
  }
}
@media (max-width: 570px) {
  header .col-md-9 {
    text-align: center;
  }
  .logo {
    float: none;
  }
  .tagline {
    padding: 0;
    text-align: center;
    float: none;
    margin: 20px 0 0 0;
  }
  .tagline:before {
    display: none;
    padding: 0;
  }
}



.modal-dialog.orderDetails { width: 900px !Important; }




.productImageWrapper {
    width: auto;
    height: auto;
    /* border: 1px dotted green; */
    overflow: visible;
}

.productImageWrapper img {
  width: 100%;
  margin: auto;
  display: block;
  opacity: 1;
  -webkit-transform: scale(1,1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1,1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

.productImageWrapper img:hover {
  opacity: 1;
  -webkit-transform: scale(2.05,2.07);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(2.05,2.07);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

.productImageSubWrapper img:hover {
    opacity: 1;
    -webkit-transform: scale(2.05,2.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(2.05,2.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
    overflow: hidden;
}




/* HOLIDAY HOVER CLIPART */
.holidayClipArt img:hover {
    opacity: 1;
    -webkit-transform: scale(2.05,2.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(2.05,2.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
    overflow: hidden;
}



/* INSIDE LOADING PANEL */

div.loadingboxinside {
    z-index: 15000;
    filter: alpha(opacity=30); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* IE */
    -moz-opacity: .30; /*older Mozilla*/
    -khtml-opacity: 0.3;   /*older Safari*/
    opacity: 0.3;   /*supported by current Mozilla, Safari, and Opera*/
    background-color:#ffffff;
    /*position:fixed; top:0px; left:0px; width:100%; height:100%; */
    text-align:center; vertical-align:middle;
    display:block;
    
    
}
div.loadingImageBoxInside { border: 1px solid #b2b2b2; height: 130px; margin: auto; margin-top: 250px;
    width: 150px; background-color: #dadada; z-index: 15001;
    -moz-border-radius: 10px !Important;
    -webkit-border-radius: 10px !Important;
    border-radius: 10px !Important; /* future proofing */
    -khtml-border-radius: 10px !Important; /* for old Konqueror browsers */
    
     }
div.loadingboxinside img { margin-top: 26px; }


.pageLoader {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9990; /* Specify a stack order in case you're using a different order for other elements */
    cursor: not-allowed; /* Add a pointer on hover */
}
#pageLoader {
    /*position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-color:#eceaea;
    z-index:9990;
    opacity: 0.6;
    filter: alpha(opacity=60);*/

    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9990; /* Specify a stack order in case you're using a different order for other elements */
    cursor: not-allowed; /* Add a pointer on hover */
}
#pageLoaderText {            
    width: 150px;
    height: 120px;
    border-radius: 15px !Important;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    position: fixed;
    text-align: center;
    padding-top: 15px;
    font-weight: bold;
    background-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index:9991;
}
body #pageLoader {
    display:block;
    overflow:hidden;
}

#pageLoader2 {
    position: absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-color:#eceaea;
    z-index:9990;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
#pageLoader2Text {            
    width: 150px;
    height: 120px;
    border-radius: 15px !Important;

    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    position: fixed;

    text-align: center;
    padding-top: 15px;
    font-weight: bold;
    background-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index:9991;
}
body #pageLoader2 {
    display:block;
    overflow:hidden;
}


#pageLoaderDiv {
    display: none; /* Hidden by default */
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    z-index: 9990;
    cursor: not-allowed;
}

#pageLoaderTextDiv {
    width: 150px;
    height: 120px;
    border-radius: 15px !Important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 15px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 9991;
}

div #pageLoaderDiv {
    display: block;
    overflow: hidden;
}



/*Facebook style button loader white*/
.lds-facebook {
    /*display: inline-block;*/
    /*position: relative;
    width: 10px;
    height: 10px;*/
    transform: scale(0.3);

    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    margin-right: 8px;
    line-height: 14px;
    vertical-align: top;
}
.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}
@keyframes lds-facebook {
    0% {
    top: 8px;
    height: 64px;
    }
    50%, 100% {
    top: 24px;
    height: 32px;
    }
}

/*Facebook style loader grey*/
.lds-facebook-big {
    display: inline-block;
    position: relative;

    margin: auto;
    width: 50%;
    

    /*width: 14px;
    height: 14px;
    margin-top: -6px;
    margin-right: 8px;
    line-height: 14px;
    vertical-align: top;*/
}
    .lds-facebook-big.pad {
        top: -20px;
    }
.lds-facebook-big div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #525252;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook-big div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}
.lds-facebook-big div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}
.lds-facebook-big div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}
@keyframes lds-facebook-big {
    0% {
    top: 8px;
    height: 64px;
    }
    50%, 100% {
    top: 24px;
    height: 32px;
    }
}





/* DESIGN MANAGER SYSTEM */

div.designMgrMenu {
    background-color: #F5F5F5; 
    padding: 10px 0px; 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd;
}

div.designMgrMenu .txtBox {
    width: 50px !important;
}




.dropArea{
    background:#b5b5b5;
    border:black dashed 1px;
    height:50px;
    text-align:center;
    color:#fff;
    padding-top:7px;
}
.active-drop{
    background:#77bafa !important;
    border:solid 2px blue !important;
    opacity:.5;
    color:black !important;
}

.img-wraps {
    position: relative;
    display: inline-block; 
    font-size: 0;
}
.img-wraps .closes {
    position: absolute;
    top: 5px;
    right: 12px;
    z-index: 100;
    background-color: #FFF;
    padding: 4px 3px; 
            
    /*content: "\25AE";   this is your text. You can also use UTF-8 character codes as I do here 
    font-family: FontAwesome;*/
             
    color: red;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    line-height: 10px;
    border-radius: 50%;
    /*border:1px solid red;*/
}
.img-wraps:hover .closes {
    opacity: 1;
}

.taskIsCompleted {
    text-decoration: line-through;
    color: #808080;
    opacity: 0.33;
}