/* =========================== buttons*/
.btn, .btn-icon{border:none;vertical-align: middle;padding:8px 15px;margin:2px;opacity: 0.85;transition:all 0.2s;transition: transform 0.3s ease,background 0.5s ease;}
/* .btn{color: white;} */
.btn-red{background-color: #ff4d4d;}
.btn-orange{background-color: #ffa731;}
.btn-blue{background-color: #1a8cff;}
.btn-yellow{background-color: #ffbc00;}
.btn-green{background-color: #5cd699;}
.btn-black{background-color: #2d2d2d;}
.btn-white{background-color: #F0F0F0;}
.btn-gray{background-color: #e6e6e6;color: gray !important;}
.btn-accept{background-color:#5cd699; background-color: var(--accept-color);}
.btn-refuse{background-color: #FF4D4D; background-color: var(--refuse-color);}

.orange{color: #ffa731;}
.green{color: #5cd699; color: var(--accept-color);}
.red{color: #FF4D4D; color: var(--refuse-color);}
.white{color: white;}
.white:hover, .white:focus, .white:active {color: white;}

.btn-icon{background:none;height: 40px;line-height: 30px;}
.btn-icon:disabled{background-color: transparent;opacity: 0.7;}
.btn-span{opacity: 0.85;transition: all 0.2s;}
.btn-span:hover{cursor: pointer;transform:scale(1.2);}

.btnRight{display:block !important;  margin-left:auto !important;  margin-right: 0 !important; }

.btn-round{border-radius:100%}
.icon{display:block;width: 80px;line-height: 75px; height: 80px; text-align: center;font-size: 30px;background-color: Transparent;color: #ffa731;border: solid; border-radius: 50%;margin:25px auto;}

.error {
    border: 1px solid #b92c28 !important;
}

.break-word {
    word-break: break-all;
}

.btn:hover, .btn-icon:hover{
    /*color: white;*/
    transform: scale(1.05);
    opacity: 1;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #ddd;
    margin: 40px 0;
}

.form-group {
    margin: 20px;
}

#btnGoTopPage {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 3rem;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#btnGoTopPage i {
    color: #F8B983;
    color: var(--background-navbar-color);
}

.thinText {
    font-family: Raleway, sans-serif;
    font-size: 14px;
    font-weight: normal;
    display: inline;
    color: black;
}

/*HR*/
.hrStyle {
    border: 0;
    height: 1px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    opacity: 0.2;
}

/*DISPLAY*/
.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.none {
    display: none;
}


/*ALIGN*/
.center{text-align: center;display: block; margin: 0 auto;}

.vertical-center {
    /*margin: 0;*/
    /*bottom: 50%;*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

.center-container {
    position: relative;
    height: 100%;
}

.absolute-center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    border: solid black;
}

.right {
    float: right;
}

.left {
    float: left;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

/* SIZE */

.size1-1 {
    font-size: 1.1rem;
}
.size1-3 {
    font-size: 1.3rem;
}
.size1-6 {
    font-size: 1.6rem;
}
.size2 {
    font-size: 2rem;
}
.size3 {
    font-size: 3rem;
}
.size4 {
    font-size: 4rem;
}
.size5 {
    font-size: 5rem;
}
.size6 {
    font-size: 6rem;
}

/*MARGIN*/
.m0  { margin: 0 !important;  }
.m05 { margin: 0.5rem !important;  }
.m1 { margin: 1rem !important; }
.m2 { margin: 2rem !important; }
.m3 { margin: 3rem !important; }
.m4 { margin: 4rem !important; }
.m5 { margin: 5rem !important; }
.m10 { margin: 10rem !important; }

.mt0  { margin-top: 0 !important;  }
.mt05 { margin-top: 0.5rem !important;  }
.mt1 { margin-top: 1rem !important; }
.mt2 { margin-top: 2rem !important; }
.mt3 { margin-top: 3rem !important; }
.mt4 { margin-top: 4rem !important; }
.mt5 { margin-top: 5rem !important; }
.mt10 { margin-top: 10rem !important; }

.mb0  { margin-bottom: 0 !important;  }
.mb05 { margin-bottom: 0.5rem !important;  }
.mb1 { margin-bottom: 1rem !important; }
.mb2 { margin-bottom: 2rem !important; }
.mb3 { margin-bottom: 3rem !important; }
.mb4 { margin-bottom: 4rem !important; }
.mb5 { margin-bottom: 5rem !important; }
.mb10 { margin-bottom: 10rem !important; }

.mr0  { margin-right: 0 !important;  }
.mr05 { margin-right: 0.5rem !important;  }
.mr1 { margin-right: 1rem !important; }
.mr2 { margin-right: 2rem !important; }
.mr3 { margin-right: 3rem !important; }
.mr4 { margin-right: 4rem !important; }
.mr5 { margin-right: 5rem !important; }
.mr10 { margin-right: 10rem !important; }

.ml0  { margin-left: 0 !important;  }
.ml05 { margin-left: 0.5rem !important;  }
.ml1 { margin-left: 1rem !important; }
.ml2 { margin-left: 2rem !important; }
.ml3 { margin-left: 3rem !important; }
.ml4 { margin-left: 4rem !important; }
.ml5 { margin-left: 5rem !important; }
.ml10 { margin-left: 10rem !important; }

/*PADDING*/
.p0  { padding: 0 !important;  }
.p05 { padding: 0.5rem !important;  }
.p1 { padding: 1rem !important; }
.p2 { padding: 2rem !important; }
.p3 { padding: 3rem !important; }
.p4 { padding: 4rem !important; }
.p5 { padding: 5rem !important; }
.p10 { padding: 10rem !important; }

.pt0  { padding-top: 0 !important;  }
.pt05 { padding-top: 0.5rem !important;  }
.pt1 { padding-top: 1rem !important; }
.pt2 { padding-top: 2rem !important; }
.pt3 { padding-top: 3rem !important; }
.pt4 { padding-top: 4rem !important; }
.pt5 { padding-top: 5rem !important; }
.pt10 { padding-top: 10rem !important; }

.pb0  { padding-bottom: 0 !important;  }
.pb05 { padding-bottom: 0.5rem !important;  }
.pb1 { padding-bottom: 1rem !important; }
.pb2 { padding-bottom: 2rem !important; }
.pb3 { padding-bottom: 3rem !important; }
.pb4 { padding-bottom: 4rem !important; }
.pb5 { padding-bottom: 5rem !important; }
.pb10 { padding-bottom: 10rem !important; }

.pr0  { padding-right: 0 !important;  }
.pr05 { padding-right: 0.5rem !important;  }
.pr1 { padding-right: 1rem !important; }
.pr2 { padding-right: 2rem !important; }
.pr3 { padding-right: 3rem !important; }
.pr4 { padding-right: 4rem !important; }
.pr5 { padding-right: 5rem !important; }
.pr10 { padding-right: 10rem !important; }

.pl0  { padding-left: 0 !important;  }
.pl05 { padding-left: 0.5rem !important;  }
.pl1 { padding-left: 1rem !important; }
.pl2 { padding-left: 2rem !important; }
.pl3 { padding-left: 3rem !important; }
.pl4 { padding-left: 4rem !important; }
.pl5 { padding-left: 5rem !important; }
.pl10 { padding-left: 10rem !important; }


/* MOVE */

.moveBottom3 {
    position: relative;
    top: 3px;
}
.moveBottom5 {
    position: relative;
    top: 5px;
}
.moveBottom10 {
    position: relative;
    top: 10px;
}

.moveTop3 {
    position: relative;
    bottom: 3px;
}
.moveTop5 {
    position: relative;
    bottom: 5px;
}
.moveTop10 {
    position: relative;
    bottom: 10px;
}

.moveRight3 {
    position: relative;
    left: 5px;
}
.moveRight5 {
    position: relative;
    left: 5px;
}
.moveRight10 {
    position: relative;
    left: 10px;
}

.moveLeft3 {
    position: relative;
    right: 3px;
}
.moveLeft5 {
    position: relative;
    right: 5px;
}
.moveLeft10 {
    position: relative;
    right: 10px;
}



/* EFFECT */

/* Need a span inside the class element*/
.lineBehind {
    position:relative;
    text-align: center
}
.lineBehind:before {
    content: "";
    display: block;
    border-top: solid 2px #bebebe;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    z-index: 0;
}
.lineBehind span {
    background: #F8F8F8;
    background: var(--background-color);
    padding: 0 10px;
    position: relative;
    z-index: 1;
}