// FONT
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
// VARIABEL
$promaryColor:#00A859;
$secondaryColor:#00AFEF;
$textColor:#424b59;
// moxin
@mixin tombol {
    display: inline-block;
    background-color: $promaryColor;
    border-radius: 2em;
    color: white;
    padding: .5em 2em;
    text-decoration: none;
}

// STYLE

body{
    font-family: 'Montserrat', sans-serif;
    z-index: -100000;
    .loading {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba($color: $promaryColor, $alpha: .1);
        z-index: 10000;
        color: $promaryColor;
        /* display: none; */
    }
}

// navbar
.custum-nav-akun{
    .navbar-brand{
        img{
            width: 210px;
        }
       
    }

   
}
// akun-container
.akun-container{
    width: 100%;
    height: 100vh;
    .sidebar-akun{
        &::before{
            content: '';
            background-image: url('../../HomeAssets/img/bg/bg-login.png');
            background-repeat: no-repeat;
            background-position: top right;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.2;
            background-size:80vmax;
            z-index: -100000;

            @media screen and(max-width:992px) {
                background-size: 95vmax;
                opacity: 0.2;
            }
            
        }
        padding: 2em;
        width: 300px;
        // height: 100vh;
        box-shadow:4px 0 2px rgba($color: #000000, $alpha: .2);

        .logo-sekolah{
            margin: 1em auto;
            img{

                width: 8em;
            }
        }

        .nama-sekolah{
            h2{
                text-align: center;
                font-size: .8rem;
                color: $promaryColor;
            }
            .tombol-logout{
                @include tombol();
                transition: .4s background-color ease-in-out;
                border: 1px solid transparent;
                &:hover{
                    border: 1px solid $secondaryColor;
                    background-color: transparent;
                    color: $secondaryColor;
                    
                }
            }
        }

    

        // responsif sidebar akun
        @media screen and(max-width:992px) {
            padding: 1em;
            height: 200px;

            .logo-sekolah{
                margin: 1em auto;
                img{
    
                    width: 5em;
                }
            }
            .nama-sekolah{
                padding: 0;
                h2{
                    text-align: center;
                    font-size: .7rem;
                    color: $promaryColor;
                }
                .tombol-logout{
                    @include tombol();
                    transition: .4s background-color ease-in-out;
                    padding: .3em 1em;
                    font-size: .7rem;
                    border: 1px solid transparent;
                    &:hover{
                        border: 1px solid $secondaryColor;
                        background-color: transparent;
                        color: $secondaryColor;
                        
                    }
                }
            }
        }
    }
    .content-akun{
        padding: .3em 2em;
        // min-height: 400px;

        .content-user{
            margin-bottom: 200px;
            table{
                th{
                    font-size: .8rem;
                }
                tr{
                    font-size: .8rem;
                    color: $textColor;

                }
            }
            h2{
                font-size: 1.2rem;
                color: $secondaryColor;
            }

            .tombol-cetak-bukti-registrasi{
                    margin-bottom: 20em !important;
            }
          

        }

        .jumbotron{
            padding: 1.2em;

            .status-pendaftran p{
                font-size: .9rem;
                color: $secondaryColor;
            }
         
            p{
                color: $promaryColor;
                font-weight: 400;
            }
         
           

            @media screen and (max-width:992px) {
               p{
                   font-size: .8em;
               } 
               h1{
                   font-size: 1.5rem;
               }
               .nama{
                   color: $secondaryColor;
                   font-size: 1.2em;
               }
            }

            
        }

        .navigasi-pengisian{
            ul{
                li{
                    display: inline-block;
                    list-style: none;
                    margin-right: 2em;
                    background-color: $textColor;
                    padding: .8em 1.7em;
                    border-radius: 0 1em 0 1em;
                    a{
                        text-decoration: none;
                        color: white;
                    }
                    &.active{
                        background-color: $promaryColor;
                    }
                }
                @media screen and (max-width:992px) {
                    li{
                        padding: .2em .6em;
                        margin-right: .2em;
                        a{
                            font-size: .5em;
                        }
                    }
                }
            }

        }

        .form-container{
            .judul-form{
                h2{
                    font-size: 1.4rem;
                    color: $secondaryColor;
                }
            }

            .container-ayah{
                width: 100%;
                background-color: #ebebeb;
                padding: 1em 2em;
                border-radius: 0 2em 0 2em;
                h2{
                    font-size: 1.2rem;
                    font-weight: 600;
                    color: $promaryColor
                }
            }

            .container-ibu{
                width: 100%;
                background-color: #ebebeb;
                padding: 1em 2em;
                border-radius: 0 2em 0 2em;
                h2{
                    font-size: 1.2rem;
                    font-weight: 600;
                    color: $promaryColor
                }
            }

            .error{
                color: red;
                font-size:.9em;
                font-style: italic;
                display: block;
              
            }

            .container-nilai{
                .raport-main{
                    display: none;
                }
                .card-body{
                    .table{
                        width: 100%;
                        input[type=text]{
                            width: 7em;
                            height: 2.3em;
                            border: 1px solid $promaryColor;
                            border-radius: 3px;
                            text-align: center;
                            &:focus{
                            border: 1px solid $promaryColor;
                            outline: none;
      
                        }
                        
                     
                    }
                    
                  }
                }

            }

            .container-berkas{
                h2{
                    font-size: .6rem;
                }
                .zona-berkas{
                    background-color:#c7c7c7;
                    border-radius: 2em;
                    margin: 4em 2em;
                    padding: 2em 1em;
                    box-shadow: 4px 4px 4px rgba($color: #000000, $alpha: .2);

                    .drop-zone {
                        margin-bottom: 1em;
                        max-width: 14em;
                        height: 14em;
                        padding: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        font-family: "Quicksand", sans-serif;
                        font-weight: 500;
                        font-size: .9rem;
                        cursor: pointer;
                        color: $promaryColor;
                        border: 3px dashed $promaryColor;
                        border-radius: 10px;
                        .drop-zone--over {
                          border-style: solid;
                        }
                        
                        .drop-zone__input {
                            opacity: 0;
                            position: absolute;
                            white-space: nowrap;
                        }
                        
                        label{
                            display: inline-block;
                            position: absolute;
                            bottom:-2em;
                            font-size: .8em;
                            white-space: nowrap;
                        }
                        .drop-zone__thumb {
                          width: 100%;
                          height: 100%;
                          border-radius: 10px;
                          overflow: hidden;
                          background-color: #cccccc;
                          background-size: cover;
                          position: relative;
                        }
                        .drop-zone__thumb::after {
                          content: attr(data-label);
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          width: 100%;
                          padding: 5px 0;
                          color: #ffffff;
                          background: rgba(0, 0, 0, 0.75);
                          font-size: 14px;
                          text-align: center;
                        }
                      }
                }

                // dopzone khusus kejuaraan
                .zona-berkas-kejuaraan{
                    
                    margin: 1em 2em;
                    padding: 2em 1em;
                    box-shadow: 4px 4px 4px rgba($color: #000000, $alpha: .2);

                    .drop-zone {
                        margin-bottom: 1em;
                        max-width: 24em;
                        height: 15em;
                        padding: 25px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                        font-family: "Quicksand", sans-serif;
                        font-weight: 500;
                        font-size: .9rem;
                        cursor: pointer;
                        color: $promaryColor;
                        border: 3px dashed $promaryColor;
                        border-radius: 10px;
                        .drop-zone--over {
                          border-style: solid;
                        }
                        
                        .drop-zone__input {
                            opacity: 0;
                            position: absolute;
                            white-space: nowrap;
                        }
                        
                        label{
                            display: inline-block;
                            position: absolute;
                            bottom:-2em;
                            font-size: .8em;
                            white-space: nowrap;
                        }
                        .drop-zone__thumb {
                          width: 100%;
                          height: 100%;
                          border-radius: 10px;
                          overflow: hidden;
                          background-color: #cccccc;
                          background-size: cover;
                          position: relative;
                        }
                        .drop-zone__thumb::after {
                          content: attr(data-label);
                          position: absolute;
                          bottom: 0;
                          left: 0;
                          width: 100%;
                          padding: 5px 0;
                          color: #ffffff;
                          background: rgba(0, 0, 0, 0.75);
                          font-size: 14px;
                          text-align: center;
                        }
                      }
                }
                  
                  
             
            }

            .btn-next{
                @include tombol();
                padding: .3em 4em;
                border:1px solid transparent;
                font-weight: 600;
                transition: .3s background-color ease-in-out;
                &:hover{
                    background-color: transparent;
                    border:1px solid $promaryColor;
                    color: $secondaryColor;
                    font-weight: 600;

                }
            }

            .btn-prev{
                @include tombol();
                background-color: $secondaryColor;
                padding: .3em 4em;
                border:1px solid transparent;
                font-weight: 600;
                transition: .3s background-color ease-in-out;
                &:hover{
                    background-color: transparent;
                    border:1px solid $promaryColor;
                    color: $secondaryColor;
                    font-weight: 600;

                }
            }


           

            @media screen and (max-width:992px) {
                .btn-next{
                    @include tombol();
                    padding: .3em 2.5em;
                    border:1px solid transparent;
                    font-weight: 600;
                    font-size: .9em;
                    transition: .3s background-color ease-in-out;
                    margin-bottom: 8em;
                    margin-top: 1em;
                    &:hover{
                        background-color: transparent;
                        border:1px solid $promaryColor;
                        color: $secondaryColor;
                        font-weight: 600;
    
                    }
                }
    
                .btn-prev{
                    @include tombol();
                    background-color: $secondaryColor;
                    padding: .3em 3em;
                    border:1px solid transparent;
                    font-weight: 600;
                    font-size: .9em;
                    transition: .3s background-color ease-in-out;
                    &:hover{
                        background-color: transparent;
                        border:1px solid $promaryColor;
                        color: $secondaryColor;
                        font-weight: 600;
    
                    }
                }
            }
        }


    }
}