﻿body {
    
}

.Profile-pad {
    padding-left:33px;
}

.form {
padding-top:85px;
}

.Profile-Heading {
 font-size: 18px;
  font-weight: 700;
  /*line-height: 3.33;*/
  letter-spacing: 0.45px;
  text-align: left;
  color: #000000;
  text-transform:uppercase;
  padding-left: 14px;
  font-family: 'Varela Round', sans-serif;;
}

.title {
    padding-left:14px;
font-size:12px;
text-transform:uppercase;
font-weight: 700;
text-align: left;
  color: #000000;
  font-family: 'Varela Round', sans-serif;;
}


/*Validation red line*/
.input-wrap {
    position:relative;
    display:inline-block;
    width:44%;

}
.redline {
    position:absolute;
    display:inline-block;
    width:100%;
    bottom:0;
    left:0;
    height:1px;
    background-color:red;
}

/*Validation red line---end*/


.txt-box {
    border: 0;
    border-bottom: 1px solid #000;
    color: #e31c17 !important;
    -webkit-text-fill-color: #000;
    font-size: 20px;
    font-family: 'Varela Round', sans-serif;;
    padding: 0px 0px 0px 14px;
    font-family: 'Varela Round', sans-serif;;
    width:100%;
}



    .txt-box:focus, .select-drop:focus, .select-drop option:focus {
        box-shadow: none !important;
        outline: none;
    }

    .txt-box::-webkit-input-placeholder {
        opacity: .3;
    }


.Password-Heading {
 font-size: 18px;
  font-weight: 700;
  line-height: 3.33;
  letter-spacing: 0.45px;
  text-align: left;
  padding-left: 14px;
  color: #000000;
  text-transform:uppercase;
  font-family: 'Varela Round', sans-serif;;
}

.space {
    padding-bottom:20px;
}

.Password {
    padding-top:30PX;
}

.offer span {
    font-size: 18px;
  letter-spacing: 0.45px;
  text-align: left;
  color: #000000;
  font-family: 'Varela Round', sans-serif;;
}

/*Switch Checkbox*/
.switch {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 26px;
  margin-left:138px;


}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EBEBEB;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 2px;
  background-color: #a0a0a0;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color:#EBEBEB;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
 
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  border:1px solid #464646;
}

.slider.round:before {
  border-radius: 50%;
}

/*Switch Checkbox---END*/


/*CANCEL AND SAVE BTN*/

.Cancel-btn {
    display:inline-block;
    text-transform:uppercase;
    padding:18px 60px;
    background-color:transparent;
    font-size:14px;
    letter-spacing:1.4px;
    color:black;
    font-weight:700;
    line-height:12px;
    border-radius:5px;
    font-family: 'Varela Round', sans-serif;;
    border:1px solid black;
    margin-bottom: 15px;
}

.Save-btn {
    display:inline-block;
    text-transform:uppercase;
    padding:18px 60px;
    background:linear-gradient(to bottom,#e31c17,#c9100c);
    font-size:14px;
    letter-spacing:1.4px;
    color:white ;
    font-weight:700;
    line-height:12px;
    border-radius:5px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition:300ms ease;
    margin-left:31px;
    margin-bottom: 15px;
    font-family: 'Varela Round', sans-serif;;
}

.tn-section {
    margin-top: 60px;
}

.Save-btn:hover {
color:white;
}

.buttons {
    margin-top:38px;
   display:flex;
}

/*CANCEL AND SAVE BTN---END*/


/*Line*/
.ab-divider:before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    left: 0;
    top: -50px;
}

.ab-divider {
    position: relative;
    margin: 0 10px;
}

.ab-divider:before {
    top: 0;
    background-color: rgba(0,0,0,0.3);
}
/*Line end*/

/*Profile picture icon*/
.Profile-pic {
    text-align: center;
    padding-top: 35px;
}

.icon {  
    margin-bottom: 20px;  
}

.gray-img {
    /*position:relative;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 5px;*/
    position: relative;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 5px;
    padding: 16px;
    height: 222px;
    width: 222px;
}

.Profile-icon {
    height: 73px;
    width: 86px;
    position: absolute;
    /*left: 24%;*/
    left:37%;
    top: 13%;
}

.upload-img-btn {
    text-decoration: underline;
    color: red;
    font-family: 'Varela Round', sans-serif;;
    font-size: 14px;
    text-transform:uppercase;
    
}

.offer {
    margin-top:20px;
}

/*Profile picture icon---END*/

/*.redline:after {
    content: '';
   width:44%;
  border:1px solid red;
  display: flex;
  flex-wrap:wrap;

   /*width: 42%;
    border-bottom: solid 1px red;
    position: absolute;
    left: 3%;
    top: 15%;
    z-index: 1;*/
/*}*/




/*=====Media Queries=====*/

/*Most of the Smartphones Mobiles (Portrait)*/
@media (min-width: 320px) and (max-width: 480px) {

    .form {
        padding-top: 0px;
    }

    .Profile-pad {
    padding-left: 25px;
    padding-right: 27px;
    }

/*Profile Icon*/
    .icon {
        /*height: 141px;
        width: 141px;
        padding: 0px;
        margin-left: 93px;
        margin-bottom: 12px;*/
    }

    .icon {
        margin-bottom: 4px;
    }

    .Profile-icon {
        height: 46px;
        width: 54px;
        left: 42%;
        top: 37%;
    }

    .gray-img {
        padding: 12px;
        height: 141px;
        width: 141px;
    }

    .upload-img-btn {
    padding-right: 0px;
    font-size: 9px;
    }
    /*Profile Icon---END*/

/*inpute*/
    .Profile-Heading {
        font-size: 16px;
        padding-left:0px;
    }

    .title {
    font-size:10PX;
    }

    .txt-box {
    font-size:18px;
    }

    .txt-box {
    width:100%;
    }


    .space {
        padding-bottom: 25px;
    }
    .Password {
        padding-top: 0px;
    }


    .Password-Heading {
    padding-left: 0px;
    font-size: 16px;
    }

/*Input---end*/


/*Cancel and Save btn*/
    .Save-btn {
    margin-left: 0px;
    text-align:center;
    }

    .Cancel-btn {   
    text-align:center;
    }

    .buttons {
        flex-direction:column-reverse;
         margin-top:53px;
         padding: 0px 0px 0px 0px;
    }
   /*Cancel and Save btn---END  */

/*Switch btn */

    .switch {
    width: 51px;
    height: 26px;
    margin-left:0px;
    float:right;
    }

    .offer span {
        font-size: 17px;
        letter-spacing: 0px;
    }
    /*Switch btn---END */

    .input-wrap {
    width:100%;
    }

    .Profile-pic {
        margin-bottom: 30px;
    }


}

/*Low Resolution Tablets, Mobiles (Landscape)*/
@media (min-width: 481px) and (max-width: 767px) {
   
   
}

/*Tablets, Ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1023px) {

/*Profile Icon*/
    .gray-img {
        height: 150px;
        width: 150px;
    }

    .Profile-icon {
        height: 64px;
        width: 70px;
        left: 31%;
        top: 9%;
    }

     /*Profile Icon---end*/

/*Profile-form*/
    .title {
        font-size: 13px;
    }

    .txt-box {
    width: 100%;
    }

    .switch {
    margin-left: 80px;
    }
    /*Profile-form---END*/
   
}

/*Tablets, Ipads (landscape)*/
@media (min-width: 850px) and (max-width: 1024px) and (orientation: landscape) {
      
}

/*Ipad Pro (portrait)*/
@media (min-width: 1024px) and (max-width: 1050px) and (orientation: portrait) {

/*Profile-Icon*/

    .gray-img {
    height:200px;
    width:200px;
    }

    .Profile-icon {
    left: 33%;
    top: 11%;
    }
    /*Profile-Icon---END*/

    .txt-box {
    width: 100%;
    }
}

/*1152×648, 1280×720, 1366×768,*/
@media (min-width: 1152px) and (max-width: 1599px) {
      /*Profile icon*/
    .Profile-icon {
    left: 29%;
    top: 12%;
    } 
     .upload-img-btn {
        padding-right: 10px;
    }
    .Profile-pic {
        padding-right: 32px;
    }

    .gray-img {
    height:200px;
    width:200px;
    }
       /*Profile icon---END*/

    /**Switch Icon*/
    .switch {
        margin-left: 57px;
    }
    /*Switch Icon---end*/

}

/*1600x800*/
@media (min-width: 1600px) and (max-width: 1919px) {
    /*Profile icon*/
    .Profile-icon {
    left: 29%;
    top: 12%;
    }
    .upload-img-btn {
        padding-right: 0px;
    }

    .Profile-pic {
        padding-right: 32px;
    }

     .gray-img {
    height:200px;
    width:200px;
    }

     /*Profile icon---END*/


/*Switch Icon*/
    .switch {
    margin-left: 57px;
    }

    /*Switch Icon---end*/


    


}

/*HD Displays 1920x1080*/
@media (min-width: 1920px) {
    /*.icon {
        height: 222px;
        width: 222px;
    }*/
}