@import url('fonts.css');

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px)
{
    .logoimg
    {
        height: 72px;
        width: auto;
    }
    .maintitle
    {
        height: 52px;
        background-size: auto 52px;
    }
}
@media (min-width: 576px)
{
    .logoimg
    {
        height: 92px;
        width: auto;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px)
{
    .maintitle
    {
        height: 62px;
        background-size: auto 62px;
    }
}
@media (min-width: 768px)
{
    .maintitle
    {
        height: 72px;
        background-size: auto 72px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px)
{
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px)
{
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
}

/********main menu********/
.seponavbar
{
    background-color: #016CCC !important;
    font-family: "Prompt" , sans-serif;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
}
.seponavbar .navbar-brand
{
    color: #FFF;
}
.seponavbar .navbar-brand:focus, .seponavbar .navbar-brand:hover
{
    color: #FFF;
}
.seponavbar .navbar-nav .nav-link
{
    color: #FFF;
}
.seponavbar .navbar-nav .nav-link:focus, .seponavbar .navbar-nav .nav-link:hover
{
    color: rgba(255,255,255,.75);
}
.seponavbar .navbar-nav .nav-link.disabled
{
    color: rgba(255,255,255,.25);
}
.seponavbar .navbar-nav .active > .nav-link, .seponavbar .navbar-nav .nav-link.active, .seponavbar .navbar-nav .nav-link.show, .seponavbar .navbar-nav .show > .nav-link
{
    color: #80FF3C;
    font-weight: 400;
}
.seponavbar .navbar-toggler
{
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1);
}
.seponavbar .navbar-toggler-icon
{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.seponavbar .navbar-text
{
    color: rgba(255,255,255,.5);
}
.seponavbar .navbar-text a
{
    color: #FFF;
}
.seponavbar .navbar-text a:focus, .seponavbar .navbar-text a:hover
{
    color: #FFF;
}

/*---title home---*/
.maintitle
{
    background-position: left top;
    background-repeat: no-repeat;
}
.sepo_title_01
{
    background-image: url('../../images/main/sepo_title_01.png');
}
.sepo_title_02
{
    background-image: url('../../images/main/sepo_title_02.png');
}
/*---title complain---*/
.subtitle
{
    height: 101px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 101px;
}
.sepo_title_03
{
    background-image: url('../../images/complain/subtitle03.png');
}

/*---title subpage---*/
.sepo_title
{
    color: #FFF;
    padding: 20px;
    background-color: #1044B2;
    background-image: url('../../images/sepo_template_footer.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 94px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}
.sepo_title h5
{
    text-indent: 25px;
}

/*---search page---*/
.search_box
{
    padding: 20px;
    border: 1px solid #ECECEC;
    background-color: #FAFAFA;
    margin-top: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

/*---manage page---*/
.manage_box
{
    padding: 40px 30px;
    border: 1px solid #ECECEC;
    background-color: #FFF;
    margin-top: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

/*---sub page---*/
.message_box
{
    padding: 20px 20px 7px 20px; /*margin-top: 20px;*/
    color: #152caf;
    border: 1px solid #DBEDFB;
    background-color: #EAF3FC;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

/*------main button-------*/
.btnprimary
{
    color: #FFF;
    background-color: #152CAF;
    border-color: #152CAF;
}
.btnprimary:hover
{
    color: #FFF;
    background-color: #1834CD;
    border-color: #12279C;
}
.btnprimary.focus, .btnprimary:focus
{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);
}
.btnprimary.disabled, .btnprimary:disabled
{
    color: #FFF;
    background-color: #152CAF;
    border-color: #152CAF;
}
.btnprimary:not(:disabled):not(.disabled).active, .btnprimary:not(:disabled):not(.disabled):active, .show > .btnprimary.dropdown-toggle
{
    color: #FFF;
    background-color: #122C91;
    border-color: #102681;
}
.btnprimary:not(:disabled):not(.disabled).active:focus, .btnprimary:not(:disabled):not(.disabled):active:focus, .show > .btnprimary.dropdown-toggle:focus
{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);
}

.btnsecondary
{
    color: #FFF;
    background-color: #2A6FDB;
    border-color: #2A6FDB;
}
.btnsecondary:hover
{
    color: #FFF;
    background-color: #4080DF;
    border-color: #2265CA;
}
.btnsecondary.focus, .btnsecondary:focus
{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.3);
}
.btnsecondary.disabled, .btnsecondary:disabled
{
    color: #FFF;
    background-color: #2A6FDB;
    border-color: #2A6FDB;
}
.btnsecondary:not(:disabled):not(.disabled).active, .btnsecondary:not(:disabled):not(.disabled):active, .show > .btnsecondary.dropdown-toggle
{
    color: #FFF;
    background-color: #2265CA;
    border-color: #1F5CBA;
}
.btnsecondary:not(:disabled):not(.disabled).active:focus, .btnsecondary:not(:disabled):not(.disabled):active:focus, .show > .btnsecondary.dropdown-toggle:focus
{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.3);
}

/*------main text-------*/
.iconprimary
{
    color: #007BFF !important;
}
a.iconprimary:focus, a.iconprimary:hover
{
    color: #0062CC !important;
}

.textprimary
{
    color: #1044B2 !important;
}
a.textprimary:focus, a.textprimary:hover
{
    color: #0E3FA3 !important;
}


/* ----------- avatar main page ------------ */
.icbox
{
    text-align: center;
}
.icbox figure a
{
    text-decoration: none; /*text-transform: uppercase;*/
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: .3s ease-in-out;
}
.icbox:hover figure a
{
    text-decoration: none; /*text-transform: uppercase;*/
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.icbox figure img
{
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: .3s ease-in-out;
}
.icbox:hover figure img
{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/*---size M---*/
.m_bsize
{
    min-height: 250px;
    min-width: 190px;
}
.m_bsize .lbox
{
    max-width: 180px;
    margin: auto;
}
.m_bsize figure a
{
    font-size: 18px; /*line-height: 24px;*/
}
.m_bsize figure img
{
    width: 151px;
    height: 151px;
    border-style: solid;
    border-width: 8px;
}


/*---box blue---*/
.lc_Blue figure a
{
    color: #FFF;
}
.lc_Blue:hover figure a
{
    color: #80FF3C;
}
.lc_Blue figure img
{
    border-color: #62A4DF; /*background-color: #6b99d4;*/
}

/*---radius circle---*/
.curve_circle
{
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.curve_app
{
    border-radius: 23%;
    -moz-border-radius: 23%;
    -webkit-border-radius: 23%;
}

/*---form box---*/
.formBox
{
    background-color: #FFF;
    padding: 20px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; /*box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);*/
    box-shadow: 1px 1px 9px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: 1px 1px 9px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 1px 1px 9px 2px rgba(0,0,0,0.4);
}

/*---link---*/
.imglink
{
    text-decoration: none;
    color: #333;
    border: 1px solid #C0C0C0;
    padding: 9px;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    display: inline;
}
.imglink:hover
{
    text-decoration: none;
    color: #333;
    background-color: #F2F2F2;
}

.alink
{
    text-decoration: none;
    color: #152CAF;
    font-weight: 400;
}
.alink:hover
{
    text-decoration: none;
    color: #007DFF;
    font-weight: 400;
}

.allink
{
    text-decoration: none;
    color: #FFF;
    font-weight: 400;
}
.allink:hover
{
    text-decoration: none;
    color: #007DFF;
    font-weight: 400;
}

.iclink
{
    text-decoration: none;
    color: #333;
    font-weight: 400;
}
.iclink:hover
{
    text-decoration: none;
    color: #007DFF;
    font-weight: 400;
}


/*---nav complain---*/
.nav-complain .nav-link
{
    margin: 3px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; /*text-align: center; color: #4E7095;*/
}
.nav-complain .nav-link.active, .nav-complain .show > .nav-link
{
    border-bottom-color: rgba(111, 219, 53, 0.7) !important;
}
.nav-blue .nav-link
{
    border: 1px solid #C8E5FF;
    background-color: #D9EDFF;
    border-bottom: 5px solid transparent;
}
.nav-green .nav-link
{
    border: 1px solid #C8FFD6;
    background-color: #D9FFEE;
    border-bottom: 5px solid transparent;
}
.nav-purple .nav-link
{
    border: 1px solid #DDC8FF;
    background-color: #DCD9FF;
    border-bottom: 5px solid transparent;
}
.nav-yellow .nav-link
{
    border: 1px solid #FFECC8;
    background-color: #F2FFD9;
    border-bottom: 5px solid transparent;
}

/*---button complain---*/
.group_btn_complain
{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: .3s ease-in-out;
}
.group_btn_complain.lnk-blue:hover, .group_btn_complain.lnk-green:hover, .group_btn_complain.lnk-purple:hover, .group_btn_complain.lnk-yellow:hover, .group_btn_complain.lnk-orange:hover
{
    border-bottom-color: rgba(111, 219, 53, 0.7) !important;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.group_btn_complain.lnk-blue
{
    border: 1px solid #C8E5FF;
    background-color: #D9EDFF;
    border-bottom: 5px solid transparent;
}
.group_btn_complain.lnk-green
{
    border: 1px solid #C8FFD6;
    background-color: #D9FFEE;
    border-bottom: 5px solid transparent;
}
.group_btn_complain.lnk-purple
{
    border: 1px solid #DDC8FF;
    background-color: #DCD9FF;
    border-bottom: 5px solid transparent;
}
.group_btn_complain.lnk-yellow
{
    border: 1px solid #FFECC8;
    background-color: #F2FFD9;
    border-bottom: 5px solid transparent;
}
.group_btn_complain.lnk-orange
{
    border: 1px solid #FFDFC8;
    background-color: #FFF1DA;
    border-bottom: 5px solid transparent;
}

.curve_btn_complain
{
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 7px !important;
    -moz-border-radius: 7px !important;
    -webkit-border-radius: 7px !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
}

/*--------login--------*/
.bgsepoimg-mainlogin
{
    background-position: center top;
    background-image: url('../../images/login/login_sepo_complain1.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.bgsepoimg-sublogin
{
    background-position: center top;
    background-image: url('../../images/login/login_bgcol2_sepo.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #006CFF;
}

/*--------sub template--------*/
#bgsepo_body_template
{
    background-image: url('../../images/main/bgsepo_body_template.jpg');
    background-repeat: no-repeat;
    background-position: center -3px;
    background-color: #FFF;
}

/*-------Total amount present---------*/
.pre-amount
{
    padding: 10px !important;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: rgba(13, 53, 101, 0.2);
    color: #FFF;
}
.pre-amount.blue
{
    background-color: #556FDD; /*border-bottom-color: #2431CD;*/
}
.pre-amount.green
{
    background-color: #7EC028; /*border-bottom-color: #2431CD;*/
}
.pre-amount.yellow
{
    background-color: #EABF3F; /*border-bottom-color: #2431CD;*/
}
.pre-amount.red
{
    background-color: #DC3545; /*border-bottom-color: #2431CD;*/
}
.pre-amount.pink
{
    background-color: #FF99FF; /*border-bottom-color: #2431CD;*/
}
.pre-amount.gray
{
    background-color: #808080; /*border-bottom-color: #2431CD;*/
}
.pre-amount.purple
{
    background-color: #B07EE3; /*border-bottom-color: #2431CD;*/
}

/*-------Detail complain present---------*/
.pre-complain
{
    min-height: 70px;
    background-color: #E7ECF2; /*color: #4F5354 !important;*/
}
.pre-complain .orange
{
    background-color: #FE8206;
}
.pre-complain .blue
{
    background-color: #02BEC9;
}
.pre-complain .pink
{
    background-color: #E68FAC;
}
.pre-complain .yellow
{
    background-color: #F3C300;
}