/* form */
    .form-wrapper{
        width: 1400px;
        max-width: 100%;
        background-color: transparent;
        background-image: linear-gradient(290deg, #555555 0%, #000000BF 100%);
        border-radius: 15px;
        margin: 15px auto;
    }
    
        /**  header **/
        
        .externalImageBox{
            width: 90px;
            max-width: 25%;
            aspect-ratio: 1;
            background-color: #676767d1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: solid 2px white;
            border-radius: 50%;
            position: absolute;
            bottom: -50%;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .formMainIcon{
            width: 85%;
            filter: brightness(50);
        }
        
        .headerLine{
            width: 100%;
            height: 70px;
            background-color: #676767d1;
            position: relative;
            border-radius: 15px 15px 0 0;
        }
        
        .titles{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 50px 30px;
            padding-bottom: 20px;
            color: white;
            font-weight: 500;
            text-align: center;
        }
        
        .titles h3{
            margin: 0;
            color: white;
        }
        
        /** body **/
        
        .bodyForm{
            padding: 0 5%;
            padding-bottom: 30px;
        }
        
        .lessonObject{
            display: flex;
            flex-direction: column;
        }
        
        .lessonObject h5{
            margin: 0;
        }
        
        .lessonObject h5  span{
            color: #f7a699;
        }
        
        /** Button section **/
        
        .buttonBox{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        
        .buttonBox button{
            background-color: #000000a8;
            border-radius: 10px;
            font-weight: 550;
            transition: all ease .5s;
        }
        
        .buttonBox button:hover{
            transform: scale(1.1);
        }
        
        /** loader **/
        
        .loaderContainer{
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            font-size: 17px;
        }
        
        .loaderObject {
            width: 60px;
            aspect-ratio: 2;
            --_g: no-repeat radial-gradient(circle closest-side, #cdcdcd 90%,#0000);
            background: 
              var(--_g) 0%   50%,
              var(--_g) 50%  50%,
              var(--_g) 100% 50%;
            background-size: calc(100%/3) 50%;
            animation: l3 1s infinite linear;
        }
        @keyframes l3 {
            20%{background-position:0%   0%, 50%  50%,100%  50%}
            40%{background-position:0% 100%, 50%   0%,100%  50%}
            60%{background-position:0%  50%, 50% 100%,100%   0%}
            80%{background-position:0%  50%, 50%  50%,100% 100%}
        }