*{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body.dark {
            background-color: black;
        }

        body.dark .general{
            color: #fff;
        }

        body.dark #github{
            color: #fff;
        }

        body.dark #facebook{
            color: blue;
        }

        body.dark .text{
            color: #fff;
        }
       
        #photoBg.dark{
            background-color: black;
        }

       label{
              display: flex;
       }
        /******************Background Image css********************/


        .photo-card{
            background:  #05B993 url(https://devcareer.io/images/bg.svg);
            height: 100vh;
            width: 100%;
            background-size: cover;
            margin-bottom: 30px;
        }  

        .photo-card p{
            color: transparent;
        }

        .switch-text{
            margin-right: 10px;
        }

        .photo{
            padding-top: 60px;
            text-align: center;
        }

        img{
            
            border: 5px solid whitesmoke;
            border-radius: 4px;
        }

        hr{
            margin-top: 30px;
        }

        .img-btn{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: whitesmoke;
            width: 300px;
            border-style: none;
            border-radius: 2.5px;
            cursor: pointer;
            font-size: 17px;
        }

        .btn-i{
            text-align: center;
        }

        a{
            text-decoration: none;
            color: inherit;
        }

        .general{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            width: 100%;  
        }

        .createAccountLink{
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            margin-right: 15px;
        }

        .details{
            grid-column: 2/4;
        }

        .container-detail{
            margin-left: 100px;
            margin-right: 100px;
        }

        h1{
            margin-bottom: 25px;
        }

        .career-role{
            display: flex;
            margin-bottom: 30px;
            width: auto;
            flex-wrap: wrap;
        }

        /******************Profile details********************/


        .btn-disabled{
            background-color: #556270;
            color: white;
            margin-right: 7px;
            height: 30px;
            border-radius: 2px;
            padding-right: 23px;
            padding-top: 0px;
            letter-spacing: 1px;
            border-style: none;
            padding-left: 2px;
            white-space: nowrap;
            margin-top: 7px;
            cursor: default;
        }

        .border-line{
            border: #05B993 solid 2px;
            margin-bottom: 30px;
        }

        .text{
            margin-bottom: 50px;
            color: rgb(132, 111, 132);
        }

        .contact-links i{
            border: 1px solid ;
            border-radius: 50%;
            padding: 20px;
            margin-right: 20px;
            margin-bottom: 15px;
        }

        /******************Contact links********************/


        .contact-links #mobile{
            padding: 21px !important;
        }

        .contact-links p{
            margin-bottom: 30px;
        }

        a #facebook{
        color: #505F98;
        }

        a #linkedin{
            color: #006097;
        }
        a #twitter{
            color: #1a91da;
        }

        a #github{
            color: #323131;
        }

        a #mobile{
            color: #06c258;
        }

        a #dev{
            color: inherit;
        }

        .createAccountLink b{
            color: #996f23;
        }

        .none{
            text-align: center;
        }

        .switch-column{
            display: flex;
            justify-content: space-between;
            grid-column: 1/4;
            z-index: 1;
        }

        .end{
            display: flex;
            justify-content: flex-end;
            top: 20px;
            margin-top: 10px;
            margin-right: 14px;           
        }

        .green{
            width: 33.35%;
            max-width: 100%;
            background-color: #05B993;
            background-size: cover;
            color: transparent;
            z-index: -1;
        }

        input[type ="checkbox"] {
            position: relative;
            width: 55px;
            height: 20px;
            -webkit-appearance: none;
            background: linear-gradient(0deg, #333, #fff);
            outline: none;
            border-radius: 20px;
            box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px
                rgba(0,0,0,1);
            cursor: pointer;
        }

        input[type ="checkbox"]:checked {
            filter: invert(1);
        }

        input:checked[type ="checkbox"]{
            background: linear-gradient(0deg, #000, #333);
        }

        input[type ="checkbox"]:before{
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 30px;
             height: 20px;
             background: linear-gradient(0deg, #000, #6b6b6b);
             border-radius: 20px;
             box-shadow: 0 0 0 1px #232323;
             transform: scale(.98, .96);
             transition: .5s;
        }

        input:checked[type ="checkbox"]:before{
            left: 25px;
        }

        input[type ="checkbox"]:after{
             content: '';
             position: absolute;
             top: calc(50% - 2px);
             left: 20px;
             width: 4px;
             height: 4px;
             background: linear-gradient(0deg, #fff, #333);
             border-radius: 50%;
              transition: .5s;  
        }

        input:checked[type ="checkbox"]:after{
            left: 45px;
            background: #000;
            box-shadow: 0 0 5px #333, 0 0 15px #333;
        }

        @media(min-width: 950px){
            h1.none{
                display: none;
            }
            
            hr{
                display: none;
            }

            
        /******************Tablet device Specification********************/


        @media(max-width: 950px){
                .career-role{
                display: flex;
                margin-bottom: 30px;
                width: 100%     
            }

            
            hr{
                    display: none;
                }

            h1.none{
                    display: none;
                }
                
            .general{
                display: flex;
                flex-direction: column;
                }
                
            .switch-column{
                background: #05B993;
            }
        }
        
        }

       

        /******************Mobile device Specification********************/

        @media(max-width: 769px){
        .general{
            display: flex;
            flex-direction: column;
            }

            h1.show{
                display: none;
            }

            hr{
                display: block;
            }

            h1.none{
                display: block;
            }

            .photo{
                padding-top: 0px;
            }

            img{
                width: 100%;
                position: relative
            }

            .details{
                height: auto;
                padding: 0px 20px 50px 20px !important;
            }

            .img-btn{
                margin-bottom: 50px;
            }

            .photo-card{
                height: auto;
                width: 100%;
                position: relative
            }

            .container-detail{
                margin: 0px 0px 0px 0px;
            }

            .createAccountLink{
                justify-content: center;
            }

            .switch-column{
                position: absolute;
                z-index: 1;
                right: 3px;
            }

            .dumTex{
                display: none;
            }

            body.dark .switch-text{
                color: #000;
            }
        }