/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.html
{
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}
.body
{
    /*background-image: url(images/bg3.jpg);*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0.1)),url(images/bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    min-height: 100vh;
    width: auto;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.secnames 
{
    background-color: darkturquoise;
    padding: 10px;
    text-transform: capitalize;
    font-size: 20px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.secicon
{
    font-size: 20px;
    padding: 2px;
    position: absolute;
    
}
.uploadphoto
{
    height: auto;
    width: 450px;
}
.form
{
    background-color: rgba(13, 28, 23, 0.7);
    width: 500px;
    padding: 10px;
    border-radius: 30px;
}
.pinfo 
{
    /*background-color: red;*/
    height: auto;
    width: 450px;
    
}
.pinfo input
{
    width: 400px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
}
textarea
{
    width: 400px;
    border: none;
    outline: none;
    font-size: 16px;
    border-radius: 7px;
    padding: 5px;
}
.eduinfo
{
    /*background-color: red;*/
    height: auto;
    width: 450px;
}

/**************************Animations******************************/
#education, #language, #hobbies, #skills, #work, #project, #internship, #award, #achievement, #course
{
    animation: dropdown 0.5s 1;
    transition-timing-function: ease-in-out;
}
.downanim
{
    animation: up 0.5s 1;
    transition-timing-function: ease-out;
    color: red;
    font-size: 50px;
}

@keyframes dropdown2
{
    0% 
    {
        /*margin-top: -100px;*/
        transform: translate(15%,0%);
        
    }
    100%
    {
        /*margin-top: 0px;*/
        opacity: 1;
    }
}
@keyframes dropdown
{
    0% 
    {
        /*margin-top: -100px;*/
        transform: translate(0%,-15%);
        
    }
    100%
    {
        /*margin-top: 0px;*/
        opacity: 1;
    }
}
@keyframes up
{
    0% 
    {
        /*margin-top: -100px;*/
        transform: translate(0%,15%);
        
    }
    100%
    {
        /*margin-top: 0px;*/
        opacity: 1;
    }
}
@keyframes upicon
{
    0% 
    {
        /*margin-top: -100px;*/
        transform: translate(0%,50%);
        
    }
    100%
    {
        /*margin-top: 0px;*/
        opacity: 0;
    }
}
@keyframes showinfo
{
    0%
    {
        transform: scale(1);
        /*transform: translate(0px, -50px);*/
        /*top: -100px;*/
    }
    50%
    {
        transform: scale(1.1);
        transform: translate(20px, 0px);
        /*top: -50px*/
    }
    100%
    {
        transform: scale(1);
        transform: translate(0px, 0px);
        /*top: 0px;*/
    }
}
@keyframes change
{
    20%
    {
        background: #5C258D;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #4389A2, #5C258D);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #4389A2, #5C258D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }
    40%
    {
        background: #bc4e9c;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #f80759, #bc4e9c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    60%
    {
        background: #E44D26;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #F16529, #E44D26);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #F16529, #E44D26); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    80%
    {
        background: #7b4397;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #dc2430, #7b4397);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #dc2430, #7b4397); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    100%
    {
        background: #D31027;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #EA384D, #D31027);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #EA384D, #D31027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
}

/*********************************END Animations*******************************/
.eduinfo input
{
    width: 100%;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
}
select
{
    width: 212px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
}
.eduinfo .width
{
    /*width: 50%;*/
}
.laninfo
{
    /*background-color: red;*/
    height: auto;
    width: 450px;
}
.laninfo input
{
    width: 400px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
}
.hobinfo
{
    /*background-color: red;*/
    height: auto;
    width: 450px;
}
.hobinfo input
{
    width: 400px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
}
.skillinfo
{
    /*background-color: red;*/
    height: auto;
    width: 450px;
    align-content: center;
    justify-content: center;
}
.skillinfo .input
{
    width: 170px;
    margin-bottom: 0px;
    border: none;
    outline: none;
    font-size: 15px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    color: black;
    border-radius: 7px;
    padding: 5px;
    transition: all 1s ease-in-out;
    animation: dropdown2 1s 1; 
}
.btgen 
{
    width: 250px;
    height: auto;
    background-color: lawngreen;
    border-radius: 20px;
    color: black;
    padding: 5px;
    margin: 2%;
    font-size: 18px;
    outline: none;
    border: none;
}
.btgen:hover
{
    background-color: #5cbc00;
    color: black;
}
.btgen1
{
    width: 250px;
    height: auto;
    background-color: aqua;
    border-radius: 20px;
    color: black;
    padding: 5px;
    margin: 2%;
    font-size: 18px;
    outline: none;
    border: none; 
}
.btgen1:hover
{
    background-color: #00a3a3;
    color: black;
}
/***********************************************Photo Preview*****************************************/
.photo
{
    width: 200px;
    height: 200px;
    border-radius: 200px;
    border-style: dashed;
    border-color: orange;
}
.image
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    /*border-radius: 100%;*/
    clip-path: circle();
    margin-bottom: 20px;
}
#filelabel
{
    cursor: pointer;
    width: 50%;
    position: relative;
    display: inline-block;
}
.uploadbtn
{
    margin-top: 10px;
    height: 30px;
    width: 100%;
    font-size: 18px;
    border: none;
    border-radius: 40px;
    outline: none;
    background-color: orange;
    padding: 2px;
    padding-bottom: 0px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    cursor: pointer;
}
.uploadbtn:hover
{
    margin-top: 10px;
    height: 30px;
    width: 100%;
    font-size: 18px;
    border: none;
    border-radius: 40px;
    outline: none;
    background-color: rgb(208, 142, 22);
    padding: 2px;
    padding-bottom: 0px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    cursor: pointer;
}
input[type="file"]
{
    display: none;
}
.beforeupload
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    /*border-radius: 100%;*/
    clip-path: circle();
    margin-bottom: 20px;
}
.beforeupload .upicon
{
    color: orange;
    font-size: 80px;
    align-content: center;
    align-items: center;
    text-align: center;
    margin-top: 40px;
    margin-left: 62px;   
}
.text 
{
    font-size: 17px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 125px;
    margin-left: 17px;
    position: absolute;
    text-align: center;
    color: whitesmoke;
}
#result
{
    /*display: inline-block */
}
#filename
{
    /*font-size: 12px;*/
    width: auto;
    display: inline-block;
    color: whitesmoke;
}
#delfile
{
    color: red;
    font-size: 20px;
    font-weight: 500;
    margin-top: -1px;
    cursor: pointer;
}

/***********************************************RESUME TEMPLATE CSS*************************************/
.profile
{
    color: black;
    font-size: 12;
    width: 200px;
    height: 90%;
    /*background-color: #c8c9c9;*/
    background-color: #eee;
    padding: 20px;
    margin: 5px;
    border-radius: 20px;
    float: left;
    margin-left: 10px;
}
.userphoto
{
    width: 200px;
    height: 200px;
    overflow: visible;
    border-radius: 200px;
    /*border: 5px blue solid;*/
    /*background-image: url(images/%E2%80%94Pngtree%E2%80%94background%20shape_4089822.png);*/
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: circle();
}
.right
{
    /*float: right;*/
    margin-top: 20px;
    margin-left: 240px;
    padding-top: 10px;
}
.right .name
{
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 2px;
    font-size: 25px;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-transform: uppercase;
}
.main
{
    width: 430px;
}
hr
{
    width: 95%;
    margin-left: 10px;
}
.main .education
{
    width: 400px;
    margin-left: 20px;
    margin-top: 0px;
}
.sections
{
    width: 100%;
    margin-left: 10px;
    margin-top: -10px;
    color: deepskyblue;
    height: 2px;
}
.skilldiv
{
    width: 200px;
    /*padding: 2px;*/
    font-size: 12px;
}
.per
{
    background-color: #0b62ef;
    height: 10px;
    text-align: center;
    color: white;
    padding-top: 2px;
    position: relative;
    font-size: 80%;
    margin-left: 100px;
    margin-top: -15px;
    min-width: 12px;
    border: none;
    outline: none;
}
.ski
{
    width: 100px;
    float: left;
    color: black;
    padding-top: 10px;
    text-transform: capitalize;
}
.courses
{
    width: 400px;
    margin-left: 20px;
    margin-top: 0px;
}
.cap
{
    text-transform: capitalize;
}

/***********************************************End of RESUME TEMPLATE CSS*************************************/


.addbtn 
{
    /*background-color: #05d405;*/
    background-color: #080;
    width: 35%;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 20px;
    border-radius: 50px;
    margin: 5px;
    color: whitesmoke;
    font-weight: 500;
    cursor: pointer;
    
}
.addbtn .icon
{
    font-size: 25px;
    margin-bottom: -5px;
    font-weight: 500;
    
}
.addbtn:hover
{
    background-color: #0a0;
}


.delbtn 
{
    background-color: #c00;
    width: 35%;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 20px;
    border-radius: 50px;
    margin: 5px;
    color: whitesmoke;
    font-weight: 500;
    cursor: pointer;
}
.delbtn .icon
{
    font-size: 25px;
    margin-bottom: -5px;
    font-weight: 500;
}
.delbtn:hover
{
    background-color: #f00;
}

.addbtn1 
{
    /*background-color: #05d405;*/
    /*background-color: #080;
    width: 80%;*/
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 20px;
    border-radius: 50px;
    margin: 5px;
    color: #080;
    font-weight: 500;
    cursor: pointer; 
}
.addbtn1 .icon
{
    font-size: 25px;
    margin-bottom: -5px;
    font-weight: 500;
}
.addbtn1:hover
{
    color: #0a0;
}


.delbtn1 
{
    /*background-color: #c00;*/
    width: 80%;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 20px;
    border-radius: 50px;
    margin: 5px;
    color: #c00;
    font-weight: bolder;
    cursor: pointer;
}
.delbtn1 .icon
{
    font-size: 20px;
    font-weight: 500;
}
.delbtn1:hover
{
    color: #f00;
}
.controls
{
    width: 100%;
    display: inline-flex;
}
.nextbtn
{
    margin-top: 15px;
    margin-bottom: 15px;
    height: 30px;
    width: 30%;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    outline: none;
    /*background-color: #ffb733;*/
    background-color: #01f9c6;
    padding: 2px;
    padding-bottom: 0px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    cursor: pointer;
    margin-left: 170px;
}
.next
{
    font-size: 20px;
    margin-top: 5px;
}
.backbtn 
{
    margin-top: 15px;
    margin-bottom: 15px;
    height: 30px;
    width: 30%;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    outline: none;
    /*background-color: #ffb733;*/
    background-color: #01f9c6;
    padding: 2px;
    padding-bottom: 0px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    cursor: pointer;
    margin-left: 10px;
}
.skipbtn
{
    margin-top: 15px;
    margin-bottom: 15px;
    height: 30px;
    width: 30%;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    outline: none;
    /*background-color: #ffb733;*/
    background-color: #f00;
    padding: 2px;
    padding-bottom: 0px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    cursor: pointer;
    margin-left: 180px;
}
.backbtn:hover
{
    /*background-color: #ee9a00;*/
    background-color: #00c69d;
}
.nextbtn:hover
{
    /*background-color: #ee9a00;*/
    background-color: #00c69d;
}
.skipbtn:hover
{
    background-color: #c00;
}
.controls a
{
    text-decoration: none;
    color: black;
}
.skipbtn a
{
    text-decoration: none;
    color: white;
}

/************************************************POP UP Box********************************************/
.popbox
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    text-align: center;
    background-color: #f33;
    width: 400px;
    height: 200px;
    z-index: 1;
    border-radius: 20px;
    color: white;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    padding-left: 5px;
    padding-right: 5px;
}
.popbox .close
{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}
.popbox .close:hover
{
    color: red;
    font-size: 25px;
}
.popbox .error
{
    font-size: 90px;
    color: white;
    font-weight: bolder;
}
.popbox p
{
    font-size: 22px;
    font-weight: 100;
}

/************************************************Notice Box********************************************/
.notice
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    text-align: center;
    background-color: rgb(255, 165, 0);
    width: 400px;
    height: 500px;
    z-index: 1;
    border-radius: 20px;
    color: black;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    padding-left: 5px;
    padding-right: 5px;
}
.notice .close
{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}
.notice .close:hover
{
    color: orange;
    font-size: 25px;
}
.notice .error
{
    font-size: 90px;
    color: white;
    font-weight: bolder;
}
.notice p
{
    font-size: 22px;
    font-weight: 100;
}
.download
{
    height: auto;
    width: 450px;
    align-content: center;
    justify-content: center;
}
.download h3
{
    color: white;
    font-size: 22px;
}
.download .downicon
{
    color: lawngreen;
    font-size: 80px;
    align-content: center;
    align-items: center;
    text-align: center;    
}
/************************************************Toggle Button********************************************/
.yearrow
{
    animation: dropdown2 1s 1; 
}
.yearrow .span1
{
    color: white;
    font-weight: 200;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    display: inline-block;
}
.switch 
{
  position: relative;
  display: inline-block;
  width: 46px;
  height: 20px; 
}
.switch input 
{
  opacity: 0;
  width: 0;
  height: 0;
}
.slider 
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before 
{
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider 
{
  background-color: #2196F3;
}
input:focus + .slider 
{
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before 
{
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round 
{
  border-radius: 34px;
}

.slider.round:before 
{
  border-radius: 50%;
}
.skillrow
{
    /*animation: dropdown2 1s 1; */
}
.skillrow span
{
    color: white;
    font-weight: 200;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}
.secicon1
{
   font-size: 20px;
    padding: 2px;
    position: absolute;
    color: white;
    padding-top: 5px;
    margin-left: -25px;
    margin-top: -5px;
}
.info
{
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    animation: showinfo 1s 1;
    animation-delay: 1s;
}
.intro
{
    height: 400px;
    width: 500px;
    font-size: 24px;
    text-align: center;
    /*font-family: 'Hammersmith One', sans-serif;*/
    font-family: 'Ropa Sans', sans-serif;
    padding: 10px;
    /*background-color: rgba(255, 166, 0, 0.80);*/
    background: #0575E6;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #021B79, #0575E6);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 20px 20px 20px 20px;
}
.intro p
{
    color: whitesmoke;
    margin-top: 80px;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.intro ul
{
    font-family: 'Ropa Sans', sans-serif;
    margin-bottom: 20px;
    color: wheat;
    display: list-item;
}
.feaicons
{
    position: absolute;
    margin-left: -27px;
    margin-top: -2px;
    font-size: 25px;
}
.startbtn
{
    height: 30px;
    width: 100px;
    color: white;
    font-size: 22px;
    cursor: pointer;
    text-transform: capitalize;
    margin-top: 50px;
    border: none;
    outline: none;
    padding: 5px;
    padding-bottom: 10px;
    border-radius: 10px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fe8c00;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    animation: change 10s infinite;
    transition: all 1s ease-in-out;
}
.startbtn:hover
{
    animation-play-state: paused;
    background: #fe8c00;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


/**************************************************Preview RESUME***********************************************/
.A4
{
    height: 100%;
    width: 100%;
    overflow: scroll;
}

.courses1
{
    width: 400px;
    margin-left: 20px;
    position: relative;
    text-align: left;
    margin-top: auto;
}
.education1
{
    width: 400px;
    margin-left: 20px;
    margin-top: 0px;
    position: relative;
    text-align: left;
}
.sections1
{
    width: 70%;
    margin-left: 10px;
    margin-top: -10px;
    color: deepskyblue;
    height: 2px;
    text-align: left;
}