@font-face{
    font-family: FontHeadings;
    src: url(../libs/font/Headingfont.ttf);
    
}

@font-face{
    font-family: FontReg;
    src: url(../libs/font/ethnocentricrgit.ttf);
    
}

h2{
    font-family: FontHeadings;
    color: white;
}
h3{
    font-family: FontHeadings;
    color: white;
}
h4{
    font-family: FontReg;
    color: white;
}

h5{
    font-family: inherit;
    color: white;
}

.headings{
    
    font-family: FontHeadings;
}

.btnOptions{

    font-size: 12pt;
    width: 300px;
    height: 60px;
    border: 3px solid;
    border-color: white;
    background-color: #2A658E;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 20px;
    font-weight: bold;
    
}
.TxtClient{
    color: white;
    
}

.btnOptions:hover{
    
    border-color: #2A658E;
    border: 3px solid;
    color: #2A658E;
    background-color: white;
    font-weight: bold;
}

.btnOptionsDiv1{
    color: white;
    margin-left: 15%;
    margin-top: 50px;
    margin-bottom: 70px;
}

OptionsDiv{
       color: white;
    margin-left: 15%;
    margin-top: 50px;
    margin-bottom: 70px; 
}


.btnOptionsDiv{
    color: white;
    margin-left: 15%;
    margin-top: 50px;
    margin-bottom: 70px;
}

.btnOptionsDivss{
    color: white;
    margin-left: 15%;
    margin-top: 50px;
    margin-bottom: 70px;
}

.CButtons{
    
    margin-left: 31%; 
    margin-top:20px;
}

.btnback{
    
    width: 150px;
    height: 50px;
    border: 3px solid;
    border-color: white;
    background-color: #2A658E;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
   
    
}

.btnProceed{
   
    width: 200px;
    height: 50px;
    border: 3px solid;
    border-color: white;
    background-color: #2A658E;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-left: 44%;
}

.btnProceed1{
   
    width: 200px;
    height: 50px;
    border: 3px solid;
    border-color: white;
    background-color: #2A658E;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 20px;
    
}

.validationMessage{
    color: red
    
}

.TxtClient{
    
    margin-top: 25px;
}

.IndexBtnA{
    
    margin-bottom: 20px;
    float: left;    
}


.IndexPNG{
    
    background-color: #003b5c;
    height: 90px;
    border-radius: 60px;
    position: absolute;
    
}

#userNametxt{
    color: white
}


.indexhome{
    
  background-image: url(../images/BGMTT.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    height: 100%;
    overflow:scroll;
    
}


.aTabs{
    
    color: white;
    
}

.aTabs:active{
    
    color: #003b5c;
    
}

.StruturesDiv{
    
    margin-top: 50px;
    color: white;
    text-align: center;
    background-color: rgba(255,255,255,0.05);
    margin-bottom: 50px;
    
}

.btnStructures{
    
    margin-right: 20px;
   
}

.btnStructures:hover{
    
    border-color: white;
    border: solid 3px;
    
}

.StructureImg{
    
    margin-bottom: 10px;
    position: absolute;
    bottom: 20px;
    margin-left: -25%;
    
}

.panalbody{
    
    width: 300px;
    height: 250px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: rgba(42,101,142, 1);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-contentQQ {
  background-color: rgba(42,101,142, 1);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.TentSizeImg{
    
    max-height: 100%;
    max-width: 70%;
    margin-bottom: 10px;
    bottom: 20px;

}

#headerImg{
    
    width: 160px;
  height: 54px;
  object-fit: cover;
}

.btnExOptionY{
       
    width: 200px;
    height: 50px;
    border: 3px solid;
    border-color: white;
    background-color: green;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 20px;
    
}

.btnExOptionN{
    
       
    width: 200px;
    height: 50px;
    border: 3px solid;
    border-color: white;
    background-color: red;
    color: white;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

#addStructss:hover{
    border: 3px solid;
    border-color: white;
    
    
    
    
}

 #addStructss{
        
       width: 50%;
       margin-left: 25%;
        
}
#overviewdiv1{
    
    width: 60%;
}

.clicktoadd{
    
    text-align: center; 
    margin-left: 15%; 
    color: white; 
    margin-top: 8px;
}

.btnOptionsDiv{
    
    margin-left: 25%;
}

.btnOptionsDivss{
    
   
}

.Tentdropdowndiv{
    
    margin-left: 30%;
    
}

#overviewdiv{
    
  margin-left: 5%;
    width: 75%;
    
}

#modalDelete{
    
    width: 50%
}

#overviewpro{

    margin-left: 40%;
}

#displayQuote{
    
    width:50%;
}

#btnSQuote{
    
   margin-left: 75% 
    
}

.btndisc{
    
    width: 600px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.activeA, .accordion:hover {
   background-color: #ccc;
}

.active, .accordion:hover {
 
}

/* Style the accordion panel. Note: hidden by default */
.panelAccordian {
  padding: 0 18px;
  background-color: transparent;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.accordion1 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active1, .accordion1:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panelAccordian1 {
  padding: 0 18px;
  background-color: transparent;
  display: none;
  overflow: hidden;
}

.accordion1:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active1:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


.accordion2 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active2, .accordion2:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panelAccordian2 {
  padding: 0 18px;
  background-color: transparent;
  display: none;
  overflow: hidden;
}

.accordion2:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active2:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.accordion3 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active3, .accordion3:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panelAccordian3 {
  padding: 0 18px;
  background-color: transparent;
  display: none;
  overflow: hidden;
}

.accordion3:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active3:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


#navbarTop{
    
    margin-bottom: 0; 
    height: 80px;
    
}

#DropdownTFab{
        margin: auto;
    width: 400px;
}


@media (max-width:1600px) and (min-width:200px)  {
    

    
    .btndisc{
    
        width: 400px;
    }

    
}



@media (max-width:1200px) and (min-width:200px)  {
    #overviewdiv{
        
        margin: auto;
        width: auto;
        
    }

    
    .btndisc{
    
        width: 400px;
    }

    .modal-contentQQ {
     
        width: auto;
    }
}


@media (max-width:800px) and (min-width:200px)  {
    #overviewdiv{
        
        margin: auto;
        width: auto;
        
    }
    
    
    #DropdownTFab{
    
        width: 300px;
    }
    
    .modal-contentQQ{
        
        margin-top: 100px;
            
    }
      #userNametxt{
        
        display: none;
    }
    
    #navbarTop{
        
        height: 120px;
    }
    
    #logoutdrop{
       
        margin-top: -45px;
        
    }
    
    .btndisc{
    
        width: 200px;
    }

    .modal-contentQQ {
     
        width: auto;
    }
}


@media (max-width:690px) and (min-width:200px)  {
    
    .modal-content{
        
        width: 100%
    }
    
    .btndisc{
    
        width: 150px;
    }

    
    .Tentdropdowndiv{
    
        margin-left: 0%;
    
    }
    #userNametxt{
        
        display: none;
    }
    
    
    .logoutdrop{
       
        margin-top: -45px;
        
    }
    
    #modalDelete{
        width: auto;
    }
    
    #overviewdiv1{
        width: 100%;
        
    }
    
    #addStructss{
        
       width: 50%;
        margin-left: 18%;
        
    }
    
    #overviewpro{
        
        margin-left: 15%;
    }
    
    .btnOptionsDiv{
        
        margin-left: 0;
    }
    
    #structdivs{
        
        margin-left: 10%;
    }
    
    #btnStructuresp{
        
        margin-left: 30%;
        
    }
    
    #btnStructures{
        
         margin-left: 30%;
        
    }
    
    #overviewdiv{

        
    }
    
    #quotecontent{
        width: 80%;
        margin-left: 10%; 
    }
    
    #btnSQuote{
        margin-left: 0;
    }
    
    .btnProceed{
        
        margin-left: 0%; 
            
    }
    
    #displayQuote{
    
        width:100%;
    }

}