body {
   overflow-y: auto;
}

/*************************************/
/* FLUID SIZES                       */
/*************************************/

.full-w, .fluid-s, .fluid-m, .fluid-l {
   position: relative !important;
   display: inline-block !important;
}

.fluid-s, .fluid-m, .fluid-l {
   left: 50% !important;
}

.full-w { 
   width: 100% !important;
}

.fluid-s {
   width: 100px !important;   
   margin-left: -50px !important;
}

.fluid-m {
   width: 250px !important;
   margin-left: -125px !important;
}

.fluid-l {
   width: 400px !important;
   margin-left: -200px !important;
}

.size-xs {
   width: 75px !important;
}

.size-s {
   width: 100px !important;
}

.size-sm{
   width: 150px !important;
}

.size-m {
   width: 250px !important;
}

.size-l {
   width: 400px !important;
}

/*************************************/
/* BURGER MENU                       */
/*************************************/

.burger_menu {
   float: left;
   width: 35px;
   height: 25px;
   position: relative;
   transform: rotate(0deg);
   transition: .5s ease-in-out;
   cursor: pointer;
}

.burger_menu span {
   display: block;
   position: absolute;
   height: 4px;
   width: 100%;
   background: #ffffff;
   border-radius: 4px;
   opacity: 1;
   left: 0;
   transform: rotate(0deg);
   transition: .25s ease-in-out;
}

.burger_menu span:nth-child(1) {
   top: 0px;
}
 
.burger_menu span:nth-child(2),.burger_menu span:nth-child(3) {
   top: 8px;
}
 
.burger_menu span:nth-child(4) {
   top: 16px;
}
 
.burger_menu.open span:nth-child(1) {
   top: 8px;
   width: 0%;
   left: 50%;
}
 
.burger_menu.open span:nth-child(2) {
   transform: rotate(45deg);
}
 
.burger_menu.open span:nth-child(3) {
   transform: rotate(-45deg);
}
 
.burger_menu.open span:nth-child(4) {
   top: 8px;
   width: 0%;
   left: 50%;
} 

.burger_menu__text {
   position: relative;
   float: left;
   margin-left: 10px;
   height: 25px;
   font-size: 16px;
}

/*************************************/
/* BUTTONS                           */
/*************************************/

.button {
   display: inline-block; 
   height: 40px;
   padding: 3px;
   margin-top: 20px;
   border: 1px solid #333;
   border-radius: 3px;
   background-color:#4337E6;
   color: #fff;
   font-family: 'Roboto', Arial;
   font-weight: bold;
}

.button:hover {
   cursor: pointer;
   background-color: #7f77ee;
}

.btn-error {
   background-color: #e70000 !important;
}

.btn-error:hover {
   background-color: #ff8080 !important;
}

.btn-cancel {
   background-color: #ddd !important;
   color: #000 !important;
}

.btn-cancel:hover {
   background-color: #eee !important;
}

/*************************************/
/* TEXTBOX                           */
/*************************************/

.input-group{
   position: relative;
   display: inline-block;
   box-sizing: border-box;
   height: auto;
   width: 100%;
   text-align: left;
   font-size: 16px;
}

.textbox {
   display: inline-block;
   width: calc(100% - 16px);
   height: 25px;
   padding: 7px;
   border: 1px solid #999;
   border-radius: 3px;
   font-family: 'Roboto', Arial;
   font-size: 15px;
   color: #000;  
}

.textbox:focus {
   border: 2px solid #4337E6;
   width: calc(100% - 18px);
   height: 23px;
}

.textbox:focus::after {
   border-radius: 3px;
}

textarea {
   resize: none;
}

label {
   transform: translate(5px, 30px);
   padding: 0 3px 0 3px !important;
   display: inline-block;
   font-size: 16px;
   width: auto;
   height: 16px;
   padding: 0;
   color: #888;
   transition: 0.2s ease-in-out;
}

.focused{
   transform: translate(5px, 9px) !important;
   font-size: 12px !important;
   color: #4337E6;
   background-color: #fff;
}

/**/
/**/
/**/

select {
   width: 100% !important;
   display: inline-block;
   border: 1px solid #999;
   border-radius: 3px;
   margin-top: 12px;
   padding: 7px;
   font-size: 14px;
}

/**/
/* MODAL WINDOW*/
/**/

.modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}

.modal_content {
   position: relative;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   width: 70%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.3s;
   animation-name: animatetop;
   animation-duration: 0.3s
} 

@-webkit-keyframes animatetop {
   from {top:-300px; opacity:0} 
   to {top:0; opacity:1}
}
 
@keyframes animatetop {
   from {top:-300px; opacity:0}
   to {top:0; opacity:1}
} 

.modal_close {
   color: white;
   float: right;
   font-size: 28px;
   font-weight: bold;
}
 
.modal_close:hover,
.modal_close:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
 }
 
.modal_header {
   padding: 2px 16px;
   color: white;
}
 
.modal_body {
   padding: 2px 16px;
}
 
.modal_footer {
   padding: 2px 16px;
   color: white;
}

.modal_error {
   background: linear-gradient(to right, #ff4d4d, #4337E6) !important;
}