body {
    font-family: roboto, sans-serif;
    font-size: 13px;
    color: #909090;
    -webkit-font-smoothing: antialiased;
    background-color: rgb(248, 248, 248);
}

.hidden {
    display: none !important;
}

.opacity {
	opacity : 0.2;
	
}
 
.wrapper {      
    width : 800px;
    margin: 10px auto;
    overflow: hidden;
    border-radius : 15px;
    border : 0px solid #0974a7;
    background-color: #FFFFFF;
}

h1 {
    display: block;
    margin: 20px  auto;
    font-size: 32px;
    text-align: center;
    color:#0974a7;
}

#logo {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;            
}

#login { 
    margin: 100px auto;
    text-align: center;    
}

.form-item {  
    display: flex;
    flex-direction: column;    
    width : 400px;
    margin : 20px auto;  
    font-size : 15px;
}

label {
    display: inline-block;
    text-align : left;
    vertical-align: middle;    
    width: 100%;
    font-weight: 500;
    margin-bottom: 5px;
}   
    
input {
    display: inline-block;
    font-size : 15px;
    vertical-align: middle;        
    padding : 10px;  
    color: #404040;
    background-color: #fff;
    border: 1px solid #0072a7;
    border-radius: 5px; 
    outline: 0;
    resize: none;
    width : 100%; 
}
 
form:invalid {
   box-shadow: none;
}
 


.msg_attention {
    margin-left : 15px;
    color: #FF0000;
}

#mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 6000;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 142px;
    height: 142px;
    margin-top: -71px;
    margin-left: -71px;
    z-index: 9000;
    background-color: rgb(241,241,241);
    background-position-x: 50%;
    background-position-y: 48%;
    border-top-right-radius: 12.8%;
    border-bottom-left-radius: 12.8%;
    background-size: 118px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='cogs' viewBox='0 0 94 75' version='1.1' sodipodi:docname='wait_gasel.svg' inkscape:version='1.1 (c68e22c387, 2021-05-23)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs10' /%3E%3Csodipodi:namedview id='namedview8' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:pageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' showgrid='false' inkscape:zoom='11.093333' inkscape:cx='42.638221' inkscape:cy='37.545072' inkscape:window-width='1920' inkscape:window-height='1017' inkscape:window-x='3192' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:current-layer='cogs' /%3E%3Cstyle type='text/css' id='style2'%3E @-webkit-keyframes rotate-center %7B 0%25 %7B -webkit-transform: rotate(0); transform: rotate(0); %7D 100%25 %7B -webkit-transform: rotate(360deg); transform: rotate(360deg); %7D %7D @keyframes rotate-center %7B 0%25 %7B -webkit-transform: rotate(0); transform: rotate(0); %7D 100%25 %7B -webkit-transform: rotate(360deg); transform: rotate(360deg); %7D %7D %23rotate_path_1 %7B -moz-transform-origin: 33px 37px; -ms-transform-origin: 33px 37px; -o-transform-origin: 33px 37px; -webkit-transform-origin: 33px 37px; transform-origin: 33px 37px; -webkit-animation: rotate-center 1.6s linear infinite both; animation: rotate-center 1.6s linear infinite both; %7D %23rotate_path_2 %7B -moz-transform-origin: 76px 57px; -ms-transform-origin: 76px 57px; -o-transform-origin: 76px 57px; -webkit-transform-origin: 76px 57px; transform-origin: 76px 57px; -webkit-animation: rotate-center 1.2s linear infinite reverse both; animation: rotate-center 1.2s linear infinite reverse both; %7D %23rotate_path_3 %7B -moz-transform-origin: 72px 17px; -ms-transform-origin: 72px 17px; -o-transform-origin: 72px 17px; -webkit-transform-origin: 72px 17px; transform-origin: 72px 17px; -webkit-animation: rotate-center 1.1s linear infinite reverse both; animation: rotate-center 1.1s linear infinite reverse both; %7D %3C/style%3E%3Cpath id='rotate_path_1' fill='rgb(249,209,0)' stroke-linecap='round' stroke='white' stroke-width='1.8' d='M6.3,26.2l4.2,3c-1,2.8-1.4,5.7-1.3,8.6l-4.9,1.6c-1.5,0.6-2.3,2.2-2,3.7C3,46.6,4.9,50,6.7,53c0.8,1.4,2.5,1.9,4,1.3 l4.3-1.7c1.9,2.2,4.2,4,6.8,5.4l-0.7,4.6c-0.2,1.6,0.7,3.1,2.2,3.6c3.4,1.1,6.9,1.6,10.3,1.6c1.6,0,2.9-1.2,3.2-2.8l0.7-4.6 c2.9-0.5,5.7-1.6,8.1-3.2l3.6,2.9c1.3,1,3,1,4.2-0.1c2.6-2.3,5.4-5,7.1-8.1c0.8-1.4,0.4-3.2-0.8-4.2l-4.2-3c1-2.8,1.4-5.7,1.3-8.6 l4.9-1.6c1.5-0.6,2.3-2.2,2-3.7c-0.7-3.5-2.6-6.8-4.4-9.8c-0.8-1.4-2.5-1.9-4-1.3l-4.3,1.7c-1.9-2.2-4.2-4-6.8-5.4l0.7-4.6 c0.2-1.6-0.7-3.1-2.2-3.6c-3.4-1.1-6.9-1.6-10.3-1.6c-1.6,0-2.9,1.2-3.2,2.8l-0.7,4.6c-2.9,0.5-5.7,1.6-8.1,3.2l-3.6-2.9 c-1.3-1-3-1-4.2,0.1c-2.6,2.3-5.4,5-7.2,8.1C4.7,23.4,5,25.2,6.3,26.2z M34.5,27.2c5.4,0.8,9,5.8,8.2,11.2c-0.8,5.4-5.8,9-11.2,8.2 s-9-5.8-8.2-11.2S29.2,26.4,34.5,27.2z' style='fill:%230974a7;fill-opacity:1' /%3E%3Cpath id='rotate_path_2' fill='rgb(249,209,0)' stroke-linecap='round' stroke='white' stroke-width='1.5' d='M91.4,57.3c0-0.8-0.6-1.6-1.4-1.7l-2.2-0.4c-0.2-1.5-0.7-2.9-1.4-4.1l1.5-1.7c0.5-0.6,0.6-1.6,0-2.2 c-1.1-1.3-2.4-2.4-3.9-3.3c-0.7-0.4-1.6-0.3-2.2,0.3l-1.5,1.7c-1.4-0.5-2.8-0.8-4.3-0.8l-0.7-2.1c-0.3-0.8-1.1-1.3-1.9-1.1 c-1.7,0.3-3.3,0.9-4.8,1.7c-0.7,0.4-1.1,1.3-0.8,2l0.7,2.1c-1.1,0.9-2.1,2-2.9,3.3l-2.2-0.4c-0.8-0.2-1.6,0.3-1.9,1.1 c-0.6,1.6-0.9,3.3-1,5c0,0.8,0.6,1.6,1.4,1.7l2.2,0.4c0.2,1.5,0.7,2.9,1.4,4.1l-1.5,1.7c-0.5,0.6-0.6,1.6,0,2.2 c1.1,1.3,2.4,2.4,3.9,3.3c0.7,0.4,1.6,0.3,2.2-0.3l1.5-1.7c1.4,0.5,2.8,0.8,4.3,0.8l0.7,2.1c0.3,0.8,1.1,1.3,1.9,1.1 c1.7-0.3,3.3-0.9,4.8-1.7c0.7-0.4,1.1-1.3,0.8-2l-0.7-2.1c1.1-0.9,2.1-2,2.9-3.3l2.2,0.4c0.8,0.2,1.6-0.3,1.9-1.1 C91,60.7,91.4,59,91.4,57.3z M75.1,61.9c-2.7-0.5-4.5-3.1-4-5.8c0.5-2.7,3.1-4.5,5.8-4c2.7,0.5,4.5,3.1,4,5.8 C80.4,60.7,77.8,62.4,75.1,61.9z' style='fill:%230974a7;fill-opacity:1' /%3E%3Cpath id='rotate_path_3' fill='%23f9d100' stroke-linecap='round' stroke='%23ffffff' stroke-width='1.2' d='m 83.3,12.9 c -0.2,-0.6 -0.9,-1 -1.5,-0.9 l -1.7,0.3 c -0.6,-1 -1.3,-1.9 -2.2,-2.6 L 78.5,8 C 78.7,7.4 78.5,6.7 77.9,6.4 76.7,5.7 75.5,5.3 74.2,5.1 73.6,5 72.9,5.3 72.7,6 L 72,7.7 c -1.1,0 -2.3,0.2 -3.3,0.6 L 67.6,7 C 67.2,6.5 66.5,6.4 65.9,6.7 c -1.2,0.7 -2.2,1.6 -3,2.6 -0.4,0.5 -0.4,1.2 0,1.7 l 1.1,1.4 c -0.6,1 -1,2.1 -1.2,3.2 l -1.7,0.3 C 60.5,16 60,16.6 60,17.2 c 0,1.4 0.3,2.7 0.7,3.9 0.2,0.6 0.9,1 1.5,0.9 l 1.7,-0.3 c 0.6,1 1.3,1.9 2.2,2.6 L 65.5,26 c -0.2,0.6 0,1.3 0.6,1.6 1.2,0.7 2.4,1.1 3.7,1.3 0.6,0.1 1.3,-0.2 1.5,-0.9 l 0.6,-1.7 c 1.1,0 2.3,-0.2 3.3,-0.6 l 1.1,1.4 c 0.4,0.5 1.1,0.6 1.7,0.3 1.2,-0.7 2.2,-1.6 3,-2.6 0.4,-0.5 0.4,-1.2 0,-1.7 l -1,-1.4 c 0.6,-1 1,-2.1 1.2,-3.2 l 1.7,-0.3 c 0.6,-0.1 1.1,-0.7 1.1,-1.3 0,-1.4 -0.3,-2.7 -0.7,-4 z m -10.6,7.9 c -2.1,0.4 -4.1,-1 -4.5,-3.1 -0.4,-2.1 1,-4.1 3.1,-4.5 2.1,-0.4 4.1,1 4.5,3.1 0.4,2.1 -1,4.1 -3.1,4.5 z' style='display:inline;-moz-transform-origin:72px 17px;-ms-transform-origin:72px 17px;-o-transform-origin:72px 17px;-webkit-animation:rotate-center 1.1s linear infinite reverse both;-webkit-transform-origin:72px 17px;fill:%230974a7;fill-opacity:1;stroke-width:1.2;stroke-miterlimit:4;stroke-dasharray:none' inkscape:label='rotate_path_3' /%3E%3C/svg%3E%0A");    
}


/*-----------------------------------------------------*/
/* base button */
.btn-base {
    border : 0;
    border-radius : 100px;    
    background-color:#dc4b43;
    color: #FFFFFF;
    padding : 15px;
    font-size : 15px; 
}

.btn-base:hover {
    cursor : pointer;
    background-color:  #00acaf;
    color: #FFFFFF;    
}

#btn_login {
    margin-top: 30px; 
    width : 250px;     
 } 


/*----------------------------------------------------------*/
window {
    position: fixed;
    top: 50%;   
    left: 50%;    
    transform: translateY(-50%);    
    background-color: #fff;
    border: 3px solid #F1F1F1;
    border-radius: 10px;
    padding: 5px 5px;    
    box-shadow: rgb(136, 136, 136) 0px 0px 6px;    
    z-index: 7000;
}
window button {
    width : 120px;
    height : 25px;
}   
window .window-title {
    width: calc(100% - 32px);
    font-size: 12px;
    line-height: 19px;
    font-weight: 400;   
    color : black;
    text-align : center;    
    background-color: #d0d0d0;
    /* border-radius: 10px; */     
    padding: 5px 16px;  
}
    
window .window-wrapper {
    text-align : center;
}
    
#msg_window_msg {
    font-size: 14px;        
}
    
#error_window {
    width: 500px;    
    margin-left: -250px;             
}