html{ box-sizing: border-box; }
        *,::after,::before{ box-sizing: inherit }
        body { margin: 0; padding: 0; font-family: "Exo"; background-color: #ffffff; }
        .wrap { margin: 0 auto; padding: 0; max-width: 1280px; }
        .flex { display: flex; } 
        .cx { text-align: center; }
        .rx { text-align: right; }
        .fll { float: left; }
        .flr { float: right; }
        .clr { clear: both; height: 0; line-height: 0; margin: 0; padding: 0; }
        .full { width: 100%; display: block; }
        .split-10 { width: 10%; }
        .split-15 { width: 15%; }
        .split-16 { width: 16.6666667%; }
        .split-20 { width: 20%; }
        .split-25 { width: 25%; }
        .split-30 { width: 30%; }
        .split-32 { width: 32%; }
        .split-33 { width: 33.3333333%; }
        .split-40 { width: 40%; }
        .split-50 { width: 50%; }
        .split-60 { width: 60%; }
        .split-68 { width: 68%; }
        .split-70 { width: 70%; }
        .split-75 { width: 75%; }
        .split-80 { width: 80%; }
        .split-85 { width: 85%; }
        .split-90 { width: 90%; }
        .desktop-only { display: block; }
        .mobile-only { display: none; }
            
        .loader-ring{display:inline-block;position:relative;width:24px;height:24px}.loader-ring div{box-sizing:border-box;display:block;position:absolute;width:24px;height:24px;margin:3px;margin-bottom:0;border:3px solid #fff;border-radius:50%;animation:loader-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#fff transparent transparent transparent}.loader-ring div:nth-child(1){animation-delay:-.45s}.loader-ring div:nth-child(2){animation-delay:-.3s}.loader-ring div:nth-child(3){animation-delay:-.15s}@keyframes loader-ring{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
        .loading-box { display: none; }
        .loading-box .loader-multi-big { margin: 50px auto; border: 7px solid #e2e2e2; border-top: 7px solid #66ccaf; border-radius: 50%; width: 80px; height: 80px; animation: spin 0.5s linear infinite; }
        .loading-box .loader-white-small { margin: 0 auto; border: 3px solid #ffffff; border-top: 3px solid #f0f0f0; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.5s linear infinite; }
        .loading-box .loader-green-small { margin: 0 auto; border: 3px solid #66ccaf; border-top: 3px solid #ffffff; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.5s linear infinite; }
        .loading-box .loader-red-small { margin: 0 auto; border: 3px solid #e64141; border-top: 3px solid #ffffff; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.5s linear infinite; }
        .loading-box .loader-tr-big { margin: 50px auto; border: 7px solid transparent; border-top: 7px solid #ffffff; border-radius: 50%; width: 80px; height: 80px; animation: spin 0.5s linear infinite; }
        .loading-box .loader-tr-small { margin: 0 auto; border: 3px solid transparent; border-top: 3px solid #ffffff; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.5s linear infinite; }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
            
        .center-flex { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
        .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }
        .absolute-centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; }
        .cut-text { text-overflow: ellipsis; overflow: hidden; height: 1.2em; white-space: nowrap; }
        .container { margin: 0; padding: 0; }
        .boxed { margin: 0 0 20px 0; padding: 20px; border-radius: 17px; background-color: #fff; color: #303030; }
            
        .popup-center h1 { color: #303030; }
            
        .form-setup { margin: 0; padding: 0; }
        .form-setup h2 { margin: 0 0 10px 0; padding: 0 0 0 10px; font-size: 1.50em; line-height: 120%; color: #303030; }
        .form-setup p { margin: 0 0 20px 0; padding: 0; font-size: 1.25em; line-height: 120%; color: #303030; }
            
        .form-box { margin: 0 0 20px 0; padding: 12px 20px; cursor: pointer; border: 5px solid #c0c0c0; border-radius: 12px; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; }
        .form-box input { display: block; width: 100%; margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; font-size: 1.25em; font-family: 'Exo'; }
        .form-box select { display: block; width: 100%; margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; font-size: 1.25em; font-family: 'Exo'; }
        .form-box textarea { display: block; width: 100%; resize: none; margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; font-size: 1.25em; font-family: 'Exo'; color: #f0f0f0; }
        .form-box input , .form-box select , .form-box textarea { border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;  }
        
        .form-setup .button { margin: 0 0 20px 0; padding: 10px; display: block; width: 100%; min-height: auto; font-size: 1.25em; font-weight: 700;  cursor: pointer; border: 1px solid #e64141; border-radius: 9px; background-color: #e64141; color: #ffffff; text-align: center; }
        .form-setup .button:hover { background-color: #e64141; }
        .form-setup .button.last-button { margin-bottom: 0; }
        .form-setup .button.button-grey { background-color: #303030; border: 1px solid #303030; }
        .form-setup .button.button-grey:hover { background-color: #303030; border: 1px solid #303030; }
        .form-setup .button.button-light-grey { background-color: #f0f0f0; color: #303030; border: 1px solid #f0f0f0; }
        .form-setup .button.button-light-grey:hover { background-color: #f0f0f0; color: #303030; border: 1px solid #f0f0f0; }
        .form-setup .button.button-green { background-color: #66ccaf; border: 1px solid #66ccaf; }
        .form-setup .button.button-green:hover { background-color: #66ccaf; border: 1px solid #66ccaf; }
            
        .linein { margin: 20px 0; padding: 0; height: 1px; background-color: #f0f0f0; }
        .access-logo { margin: 0; padding: 0; width: 125px; height: 25px; opacity: 0.12; }
            
        .text-box { margin: 0 0 20px 0; padding: 20px; font-size: 1em; font-weight: 300; border: 1px solid #f0f0f0; border-radius: 9px; }
        .text-box strong { font-weight: 700; }
        .text-box.error-msg { border: 1px solid #e64141; }
        .text-box.warning-msg { border: 1px solid #feba1e; text-align: center; }
        .text-box a { color: #e64141; text-decoration: underline; }
        .text-box.error-msg a { color: #e64141; }
        .text-box.warning-msg a { color: #feba1e; }
        .loading-field { padding: 20px; }

        .popup-kendam .form-setup .button { font-size: 1.25em; min-height: auto; border-radius: 9px; }
            
        /* Dashboard */
        .members-line { margin: 0; padding: 0; background-color: #66ccaf; height: 7px; }
            
        .dashboard-page {  }

        .flex-container { background-color: #303030; color: #f0f0f0; 
                          height: 100%;
                          min-height: 100vh;
                          display: -ms-flexbox;
                          display: -webkit-box;
                          display: -moz-box;
                          display: -ms-box;
                          display: box;
                          -ms-flex-direction: row;
                          -webkit-box-orient: horizontal;
                          -moz-box-orient: horizontal;
                          -ms-box-orient: horizontal;
                          box-orient: horizontal; } 
            
        .side-col { background-color: #252525; 
                    -ms-flex: 0 100px;
                    -webkit-box-flex:  0;
                    -moz-box-flex:  0;
                    -ms-box-flex:  0;
                    box-flex:  0;  }
            
        .main-col {  -ms-flex: 1;
                     -webkit-box-flex: 1;
                     -moz-box-flex: 1;
                     -ms-box-flex: 1;
                     box-flex: 1;  }  
            
        .bottom-margin-mobile { margin: 0; padding: 0; height: 100px; width: 100%; display: none; }
            
        .dash-header { margin: 0; padding: 20px; }    
        .dash-header h1 { margin: 0; padding: 10px; color: #f0f0f0; text-transform: uppercase; font-weight: 700; font-size: 1.25em; border-bottom: 1px solid #777777; }
        .dash-header h1 span { color: #66ccaf; font-weight: 300; }
            
        .dash-menu { margin: 0; padding: 20px; }
        .dash-menu h5 { margin: 0; padding: 10px; color: #777777; text-transform: uppercase; font-weight: 300; font-size: 1.25em; border-bottom: 1px solid #66ccaf; }
        .dash-menu ul { margin: 0 0 40px 0; padding: 0; }
        .dash-menu ul li { margin: 0; padding: 10px; font-size: 1.25em; list-style: none; border-bottom: 1px solid #303030; text-transform: capitalize; }
        .dash-menu ul li a { display: block; margin: 0; padding: 0; color: #ffffff; text-decoration: none; position: relative; }
 
        .dash-menu-mobile { display: none; margin: 0; padding: 20px; position: fixed; bottom: 0; width: 100%; background-color: rgba(0,0,0,0.77); }
        .dash-menu-mobile i { margin: 0; padding: 0 20px; color: #ffffff; font-size: 1.5em; cursor: pointer; }    
            
        .dash-set { margin: 0; padding: 0 20px; }
        .dash-set .form-box { border-color: #777777; background-color: #252525; caret-color: #777777; }
        .dash-set .form-box input { color: #f0f0f0; }
            
        .dash-set .form-box ::placeholder { color: #777777; }
        
        /*
        .dash-set .button { border: 1px solid #66ccaf; background-color: #66ccaf; }
        .dash-set .button:hover { background-color: #66ccaf; }
        .dash-set .button-light-grey:hover { background-color: #f0f0f0; }
        */

        .dash-set .button { margin: 0 0 20px 0; padding: 10px; display: block; width: 100%; min-height: auto; font-size: 1.25em; font-weight: 700;  cursor: pointer; border: 1px solid #66ccaf; border-radius: 9px; background-color: #66ccaf; color: #ffffff; text-align: center; }
        .dash-set .button:hover { background-color: #66ccaf; }
        .dash-set .button.last-button { margin-bottom: 0; }
        .dash-set .button.button-grey { background-color: #303030; border: 1px solid #303030; }
        .dash-set .button.button-grey:hover { background-color: #303030; border: 1px solid #303030; }
        .dash-set .button.button-light-grey { background-color: #f0f0f0; color: #303030; border: 1px solid #f0f0f0; }
        .dash-set .button.button-light-grey:hover { background-color: #f0f0f0; color: #303030; border: 1px solid #f0f0f0; }
        .dash-set .button.button-green { background-color: #66ccaf; border: 1px solid #66ccaf; }
        .dash-set .button.button-green:hover { background-color: #66ccaf; border: 1px solid #66ccaf; }
            
        .dash-set .text-box { border: 0; }
        .dash-set .text-box.error-msg { border: 1px solid #e64141; display: none; text-align: center; }
            
        .dash-data { margin: 0; padding: 0; }
        .dash-data-text { padding: 20px; font-size: 1.25em; font-weight: 300; border-bottom: 1px solid #252525; }
        .data-label-text { color: #777777; }
            
        .split-pad-lx { padding-left: 10px; } 
        .split-pad-rx { padding-right: 10px; } 
        .text-info-set { display: none; }
            
        .dash-pointer { cursor: pointer; }
        #edit-displayed-name , #edit-username , #edit-email , #edit-password , #edit-website , #edit-about { display: none; }
            
        .front-layer { display: none; z-index: 777; position: fixed; top: 0; right: 0; background-color: rgba(0,0,0,0.88); width: 100%; height: 100%;  }
        .popup-kendam { display: none; cursor: default; width: 25%; }
        .popup-kendam.absolute-centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .popup-kendam h1 { margin: 0; padding: 0; font-size: 1.5em; }
        .popup-kendam h3 { font-size: 1.5em; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #fafafa; color: #000000; }
        .popup-kendam p { font-size: 1.24em; line-height: 1.2em; font-weight: 300; margin: 0; padding: 0; color: #000000; }
        #btn-popup-upgrade-membership { display: none; }
            
        #view-about { padding: 20px; font-size: 1.25em; font-weight: 300; cursor: pointer; }
        textarea#about { height: 100px; }
            
        .career-cloud { margin: 0; padding: 20px; }   
        .career-cloud span { margin: 0 7px 14px 0; padding: 10px 15px; display: inline-block; cursor: pointer; font-size: 1.25em; border-radius: 7px; background-color: #252525; color: #777777; }
        .career-cloud span.selected { background-color: #66ccaf; color: #252525; user-select: none; }
                        
        #edit-profilephoto { margin: 0; padding: 20px; }
        #edit-profilephoto label { display: block; }
        .pp-preview { margin: 0 auto; position: relative; width: 25%; padding-bottom: 25%; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #252525; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 12px; cursor: pointer; }
        .container-image-selected { margin: 0 0 20px 0; padding: 0; border-radius: 12px; overflow: hidden; }
        .default-pp { position: absolute; width: 100%; height: 100%; opacity: 0.1; }
            
        /* INIT */
        body { background-color: #303030; height: 100%; }
        .front-layer { display: block; }
        .front-layer .loading-box { display: block; }

        .cropper-view-box { outline: 1px solid #e64141; outline-color: rgba(230, 65, 65, 0.75); }
        .cropper-line { background-color: #39f; }
        .cropper-point { background-color: #e64141; }
        .cropper-point.point-se::before { background-color: #e64141; }

        @media (max-width: 991.98px) {
            
            .popup-kendam { width: 80%; }
            
        }